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

【问题标题】：Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loaderVue.js + Webpack + vue-loader + bootstrap-sass + sass-loader
【发布时间】：2016-05-20 09:22:06
【问题描述】：

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

我想做的是在我的 SPA Vue.js 代码中使用 SASS 版本的引导程序。我想这样做，这样我的引导程序定制就可以使用 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 将在被内联包含在 main.js 之前被编译为 CSS，这意味着无法访问我的组件中的任何 Bootstrap 变量。有没有办法做到这一点？

【问题讨论】：

标签： javascript twitter-bootstrap vue.js bootstrap-sass sass-loader

【解决方案1】：

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

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

这有一个额外的好处，那就是让 Bootstrap 变量在 Vue 组件的样式块中可用。此外，我完全从webpacker.base.conf.js 中删除了{ test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] }，但保留了处理字体的部分。 .vue 文件的加载器已经处理 sass。

【讨论】：

是的，简单胜于复杂。
如果您使用 .wrapper { 语法 - 似乎您需要 lang="scss"，而不是 sass。

【解决方案2】：

我设法像这样以正确的方式工作：

Vue：

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

webpack 配置加载器：

    {
      test: /\.(png|jpg|gif|svg)$/,
      loader: 'file-loader',
      options: {
        name: '[name].[ext]?[hash]'
      }
    },
    { 
      test: /\.scss$/, 
      loaders: [ 'style-loader', 'css-loader', 'sass-loader' ] 
    },
    { 
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
      loader: "url-loader?limit=10000&minetype=application/font-woff" 
    },
    { 
      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
      loader: "file-loader" 
    }

请注意，我使用的是bootstrap-sass，而不是默认的boostrap

【讨论】：

谢谢！这是最好的方法。我什至不必加载加载程序部分。

【解决方案3】：

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

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

鉴于您有一个 css 和 sass 加载程序，这很可能是一个错误的条目，您可以删除它以继续前进。

【讨论】：