Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader [英] Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader

问题描述

我刚刚开始使用Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader，我有点迷失。

I'm just getting started with Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader and I'm a little lost.

我想要做的是使用SASS版本的bootstrap和我的SPA Vue.js代码。我想这样做，所以我的引导自定义可以使用SASS完成。以下是我所做的：

What I'd like to do is use the SASS version of bootstrap with my SPA Vue.js code. I want to do this so my bootstrap customisations can be done using SASS. Here is what I've done:

• 使用vue-cli创建了一个新的Vue.js + webpack项目。


• 已安装bootstrap-sass和sass-loader。



• 在build / webpack.base.conf.js中添加以下内容：

• Created a new Vue.js + webpack project with vue-cli.
• Installed bootstrap-sass and sass-loader.

• Added the following to build/webpack.base.conf.js:

{ test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] },
{ test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url', query: { limit: 10000 } }

用一行创建src / style.scss： @import'bootstrap';

当我现在运行 npm run dev 时出现以下错误：

When I now run npm run dev I get the following error:

ERROR in ./src/main.js
Module not found: Error: Cannot resolve module 'style' in  Users/rstuart/Workspace/javascript/kapiche-demo/src
@ ./src/main.js 3:0-25

我不确定为什么这不是w工作会有。

I'm not sure why this isn't working.

此外，与此问题相关，如何在Vue组件中访问Bootstrap SASS变量？如果我理解这里发生了什么，SASS将被编译为CSS，然后被包含在main.js内联中，这意味着我的组件中无法访问任何Bootstrap变量。有没有办法实现这个目标？

Also, related to this question, how do I get access to Bootstrap SASS variables inside my Vue components? If I understand what is going on here, the SASS will be compiled to CSS before being included inline in main.js meaning there is no access to any Bootstrap variables in my components. Is there a way to achieve this?

推荐答案

我自己设法解决了这个问题。我没有尝试直接导入 style.scss ，而是完全删除了该文件，并替换了< style> 元素 App.vue 中包含以下内容：

I managed to solve this problem myself. Instead of trying to directly import style.scss, I deleted the file entirely and I replaced the <style> element of App.vue with the following:

  <style lang="sass">
    $icon-font-path: "../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
    @import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

    .wrapper {
      margin-top: $navbar-height;
    }
  </style>

这样可以在Vue组件的样式块中提供Bootstrap变量。另外，我从 {test：/\.scss$/,loaders：['style'，'css'，'sass']} > webpacker.base.conf.js 完全保留了处理字体的位。 .vue 文件的加载程序已经处理了sass。

This has the added bonus of making Bootstrap variables available in the style block of Vue components. Also, I removed { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] } from webpacker.base.conf.js entirely but kept the bit dealing with fonts. The loader for .vue files already deals with sass.

这篇关于Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！