Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader

Question

我刚刚开始使用Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader,我有点失落.

我想要做的是使用我的SPA Vue.js代码的SASS版本的bootstrap.我想这样做,所以我的引导自定义可以使用SASS完成.这就是我所做的:

• 使用vue-cli创建了一个新的Vue.js + webpack项目.
• 安装bootstrap-sass和sass-loader.

• 在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';

• 将此行添加到src/main.js的顶部: import './style.scss'

当我现在运行时,npm run dev我收到以下错误:

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

我不确定为什么这不起作用.

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

Answer 1

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

  <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.

Answer 2

它正在尝试解析style您在 webpack.base.conf.js 的此部分中指定为加载器的模块：

{ test: /\.scss$/, loaders: [ **'style'**, 'css', 'sass' ] }

鉴于您有一个 css 和 sass 加载器，这可能是一个错误的条目，您可以将其删除以继续。