如何通过vue-cli 3配置webpack使用sass

Question

I'm building a vue app with vue-cli 3. I'd like to include sass files in my webpack build but the vue-cli abstracts away the webpack.config.js file. Instead we are to create a vue.config.js file and configure it with a set of instructions.

If I were configuring webpack.config.js , the following would work:

module.exports = {
  module: {
    rules: [
      // ... other rules omitted

      // this will apply to both plain `.scss` files
      // AND `<style lang="scss">` blocks in `.vue` files
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // plugin omitted
}

How should I configure my vue.config.js to achieve the same? Here is my best attempt:

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('scss')
            .test(/\.scss$/)
            .use('vue-style-loader')
            .loader('vue-style-loader')
            .use('css-loader')
            .loader('css-loader')
            .use('sass-loader')
            .loader('sass-loader')
            .end();
    }
};

This fails with the message

ERROR  TypeError: config.module.rule(...).test(...).use(...).loader(...).use is not a function

Answer 1

If you are using vue cli 3 then just run the following in your project root directory:

vue add style-resources-loader