Vue2. X + webPack4. x Configuration scheme for importing SCSS files globally

Background: Vue project each component @import some SCSS methods or variables, especially rem function, is very inconvenient, also not convenient to unify, so, can you globally introduce this file, it is ok

Methods:

{
    test: /\.(c|sa|sc)ss$/./ / it will be applied to the common ` CSS. | sass. | sacc ` files, as well as `. Vue ` file ` < style > ` block
    use: [
        process.env.NODE_ENV !== 'production' ? 'vue-style-loader' : MiniCssExtractPlugin.loader, // Use CSS extraction only in production, this will make it easier for you to heat reload in development
        'css-loader'.'postcss-loader'.// 'sass-loader
        {
            loader: 'sass-loader'.options: {
                data: ` @import "src/commons/styles/rem.scss"; @import "src/commons/styles/var.scss"; @import "src/commons/styles/mixins.scss"; `}}},Copy the code