在vue.config中更改sass-loader的选项

Question

我对如何使用vue.config in this documentation更改sass-loader设置感到困惑，有一个webpack.config，但我的项目没有，我不认为我应该有一个，因为根据this documentation，我应该使用vue.config。

命令vue inspect包含字符串loader: 'sass-loader', 8次，所以我不确定要更改什么。

我的源码如下：

    <style lang="scss">
      .some-class {
        border-bottom: 100px solid $alert;
      }
    </style>

然后，我想使用vue.config调整webpack的值，以：

    {
      loader: 'sass-loader',
      options: {
        prependData: '$alert: ' + process.env.ALERT_COLOR + ';',
      }
    }

我想我必须更改以下条目(来自vue inspect)：

    /* config.module.rule('scss').oneOf('vue-modules') */
    {
      resourceQuery: /module/,
      use: [
        {
          loader: 'vue-style-loader',
          options: {
            sourceMap: false,
            shadowMode: false
          }
        },
        {
          loader: 'css-loader',
          options: {
            sourceMap: false,
            importLoaders: 2,
            modules: true,
            localIdentName: '[name]_[local]_[hash:base64:5]'
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            sourceMap: false
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: false,
            implementation: {
              run_: function() {
                        return _call(f, Array.prototype.slice.apply(arguments));
                      },
              render: function() {
                        return _call(f, Array.prototype.slice.apply(arguments));
                      },
              renderSync: function() {
                        return _call(f, Array.prototype.slice.apply(arguments));
                      },
              info: 'dart-sass\t1.23.0\t(Sass Compiler)\t[Dart]\ndart2js\t2.5.1\t(Dart Compiler)\t[Dart]',
              types: {
                Boolean: function() {
                          return _call(f, Array.prototype.slice.apply(arguments));
                        },
                Color: function() {
                          return _call(f, this, Array.prototype.slice.apply(arguments));
                        },
                List: function() {
                          return _call(f, this, Array.prototype.slice.apply(arguments));
                        },
                Map: function() {
                          return _call(f, this, Array.prototype.slice.apply(arguments));
                        },
                Null: function() {
                          return _call(f, Array.prototype.slice.apply(arguments));
                        },
                Number: function() {
                          return _call(f, this, Array.prototype.slice.apply(arguments));
                        },
                String: function() {
                          return _call(f, this, Array.prototype.slice.apply(arguments));
                        },
                Error: function Error() { [native code] }
              }
            }
          }
        }
      ]
    }

Answer 1

通读你链接的文档，我猜大概是这样的：

vue.config.js

module.exports = {
  chainWebpack: config => {
    const cssRule = config.module.rule('css')

    // clear all existing loaders.
    // if you don't do this, the loader below will be appended to
    // existing loaders of the rule.
    cssRule.uses.clear()

    // add replacement loader(s)
    cssRule
      .use('sass-loader')
        .loader('sass-loader')
        .tap(options => {
          // modify the options...
          return options
        })
  }
}

modify the options说，然后添加你想要的sass选项。

值得注意的是，cssRule.uses.clear()将清除之前的CSS规则。我认为你需要这样做，否则你可能会有冲突的规则。如果您发现它正在删除您需要的规则，我会手动将其添加回来(与您添加sass的方式相同。

Answer 2

在我的vue.config中，下面的方法似乎是可行的

const path = require('path')；

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "Theme/_colors.scss";
        `,
      },
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        Theme: path.resolve(
          __dirname,
          `src/themes/${process.env.THEME || 'light'}/`
        ),
      },
   },
  },
};

在_colors.css中，我只需设置变量：$alert:red;