vue cli 3引入全局scss

vue cli 3引入全局scss

pages是我写多页vue程序的配置【可以忽略】。
先在configureWebpack里面设置了路径别名【可选】。
然后在css里面指定加载的全局scss文件。prependData可以指定多个文件。

const path = require('path');
const utils = require('./build/utils.js')
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
    pages: utils.globPages(),
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.optimization = {
                minimizer: [
                    new TerserPlugin({
                        terserOptions: {
                            compress: {
                                drop_console: true
                            }
                        }
                    })
                ]
            };
        } else {
            // 为开发环境修改配置...
        }
        config.resolve = {
            // 设置别名
            alias: {
                '@': path.join(__dirname, 'src') // 这样配置后 @ 可以指向 src 目录
            }
        };
    },
    css: {
        loaderOptions: {
            scss: {
                prependData: `@import "@/assets/global.scss";`
            },
        }
    }

};