vue4.0 配置全局scss 文件

vue.config.js文件

 module.exports = {
     lintOnSave: true,
     productionSourceMap: false,
     publicPath:isProduction?'':'',
     pages: {
         index: {
             entry: 'src/main.js',
             template: 'public/index.html',
             filename: 'index.html',
             cdn:packageConfig.cdn
         }
     },
     devServer:{
      open: false, // 启动后打开浏览器
      disableHostCheck:true,//允许不同hsot访问
     },
     configureWebpack: config => {
 
     },
     css:{
         loaderOptions:{
            scss:{
                prependData:`@import "./src/scss/rem.scss";` //全局scss文件
             }
         }
     },
     chainWebpack: config => {
        config.externals({
            // vue: "Vue",
            // vuex: "Vuex",

            // axios: "axios",
            // "element-ui": "ELEMENT",
        });
         config.module
             .rule('js')
             .include
             .add(resolve('components'))
             .end()
             .use('babel')
             .loader('babel-loader')
             .tap(options => {
                 return options
             })
 
         config.module
             .rule('vue')
             .use('vue-loader')
             .tap(options => {
                 // 修改它的选项...
                 return options
             })
 
         if (isProduction) {
             config.externals(packageConfig.externals)
         }
 
     }
 }

rem.scss文件

// sass 的全局变量
@function rem($n){
    @return  ($n/2/37.5) *1rem;
}
$background-color: #f8f8f8;