Add a vue-cli Configure Sass-Resources-Loader Example

What problem does this feature solve?

I read the vue-cli docs about sass-resources-loader section and can not understand how to configure the vue-cli project for this. After some codes reading,I write these codes for that loader to work out:

//vue.config.js
var path = require('path');
module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                var scssResourceLoader = {
                    loader: 'sass-resources-loader',
                    options: {
                        resources: path.resolve(__dirname, 'src/assets/_variables.scss')
                    }
                };
                options.loaders.scss.push(scssResourceLoader);
                return options;
            });
    }
}

I hope this will help others.

What does the proposed API look like?

…

[gavinwyf]

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "@/variables.scss";`
      }
    }
  }
}

[mediaessenz]

@phoet or you just try this official parameters:

module.exports = {
    productionSourceMap: true,
    css: {
        // extract CSS in components into a single CSS file (only in production)
        extract: true,

        // enable CSS source maps?
        sourceMap: true
    }
}

You can found more options here: @vue/cli-service/lib/options.js