Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader (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进行bootstrap的自定义。 这是我所做的：

• 使用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变量。有没有办法实现这一点？

- rstuart85

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

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

- rstuart85

---

是的，简单比复杂更好。 - pylover

如果您使用.wrapper {语法，似乎需要使用lang="scss"而不是sass。 - Slava V

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

- Cedric

---

谢谢！这是最好的方法。我甚至不需要加载装载器部分。 - Jorjon

Answer 3

它试图解析你在webpack.base.conf.js文件中指定为加载器的style模块：

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

考虑到你已经有了css和sass加载器，这很可能是一个错误的条目，你可以将其删除以继续进行。

- Gabriel Isenberg