css - 在 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和 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.

这里是来自它的 peerdependency package.json :

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

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