在 Vue 组件中正确使用 SASS

Question

在我的 Vue 组件中，我将语言从默认 CSS 更改为显式设置的 SCSS，如下所示。

<style lang="scss">
  div.bordy{ border: solid 3px red; }
</style>

我也根据this post by LinusBorg改了webpack.config.js，所以变成了这个样子

module.exports = {
  entry: ["babel-polyfill", "./index.js"],
  output: { path: __dirname, filename: "bundle.js" },
  module: {
    loaders: [
      { test: /\.js$/, loader: "babel", exclude: /node_modules/ },
      { test: /\.vue$/, loader: "vue" },
      // { test: /\.scss$/, loader: 'style!css!sass' },
      { test: /\.s[a|c]ss$/, loader: "style!css!sass" }
    ]
  },
  babel: {
    presets: ["es2015", "stage-3"],
    plugins: ["transform-runtime"]
  },
  vue: { loaders: [{ scss: "style!css!sass" }] },
  resolve: { alias: { "vue$": "vue/dist/vue.common.js" } }
}

这家伙解释说，通过这样做，我们捕获了 SCSS 并将其映射到 SASS。但是，我收到一条错误消息。

Module not found: Error: Cannot resolve module 'scss-loader'

我试过如下所示安装软件包，但输出错误没有任何区别。

npm install scss-loader --save-dev

在这里，我变得不确定并且 googlearching 使我更加困惑，因为我正在阅读所有可能方向的提示，并且很少评论没有解决问题的愤怒呼喊。

我应该用style lang="sass"来陪伴吗？

当我尝试这样做时，我必须安装 node-sass 并且我不确定我是在解决问题还是隐藏它...

Answer 1

您必须安装 sass-loader and node-sass 它正在解决问题而不是隐藏它。

sass-loader documentation 清楚地说：

The sass-loader requires node-sass and webpack as peerDependency. Thus you are able to specify the required versions accurately.

这里是 package.json:

的 peerdependency

"peerDependencies": {
   "node-sass": "^3.4.2 || ^4.0.0",
    .....

这意味着 sass-loader 将适用于这些版本的 node-sass。

它在代码的 4th line 处需要它 - sass-loader/index.js:

'use strict';

var utils = require('loader-utils');
var sass = require('node-sass');

安装后，您可以执行以下任一操作：

<style lang="scss">
or
<style lang="sass">

因为您将对这两者使用相同的加载器。

在 Vue 组件中正确使用 SASS

Using SASS in Vue components the right way

css

sass

webpack

vue.js