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

找不到模块：错误：无法解析模块＆＃39; scss-loader＆＃39;

我已尝试安装软件包，如下所示，但它没有输出错误。

npm install scss-loader --save-dev

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

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

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

Answer 1

您必须安装sass-loader和node-sass，这样才能解决问题，而不是隐藏它。

sass-loader documentation清楚地说：

sass-loader需要node-sass和webpack作为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">

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

以正确的方式在Vue组件中使用SASS

1 个答案: