2使用预处理器sass,定义全局css变量

1安装依赖 sass预处理器(新建项目一般都有选择或者自己安装)
npm  install sass-loader --save-dev
npm install node-sass --save-dev
npm install sass-resources-loader --save-dev
 
2 新建或者在vue.config.js中引入目标scss.scss

module.exports = {
    //路径前缀安装依赖  sass-resources-loader
    chainWebpack: config => {
        const oneOfsMap = config.module.rule("scss").oneOfs.store;
        oneOfsMap.forEach(item => {
            item
                .use("sass-resources-loader")
                .loader("sass-resources-loader")
                .options({
                    resources: ["./src/scss1.scss", "./src/scss2.scss"]
                })
                .end();
        });
    },

}

你可能感兴趣的:(前端静态页面以及逻辑,sass,css)