在 Vue 组件中正确使用 SASS答案

【问题标题】：Using SASS in Vue components the right way在 Vue 组件中正确使用 SASS
【发布时间】：2017-05-05 22:46:23
【问题描述】：

在我的 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。但是，我收到以下错误消息。

找不到模块：错误：无法解析模块“scss-loader”

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

npm install scss-loader --save-dev

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

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

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

【问题讨论】：

标签： css sass webpack vue.js

【解决方案1】：

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

sass-loaderdocumentation明确表示：

sass-loader 需要 node-sass 和 webpack 作为 peerDependency。因此，您可以准确地指定所需的版本。

这里是来自 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">

因为你将为这两个使用相同的加载器。

【讨论】：