步骤3:测试阶段,和方法一的步骤3一样。
c.方法3
如果使用的vue-cli的版本是高版本的,那么可以直接修改vue.config.js这个文件的chainWebpack这个属性来实现多个scss文件的公用。
步骤1:同样首先安装sass-resources-loader这个插件。
npm i sass-resources-loader --save-dev
步骤2:在项目主目录下新建一个vue.config.js配置文件。大概的配置参考这篇文章
const path=require('path') module.exports={ publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './', assetsDir:'assets', indexPath:'myIndex.html', filenameHashing:false, productionSourceMap: false, chainWebpack:config=>{ const types=['vue'] types.forEach(type=>{ config.module.rule('scss').oneOf(type).use('style-resource') .loader('style-resources-loader') .options({ patterns:[ //公用的scss变量 path.resolve(__dirname,'./src/assets/css/variable.scss'), //公用的scss混入 path.resolve(__dirname,'./src/assets/css/mixin.scss'), //共用的默认样式 path.resolve(__dirname,'./src/assets/css/base.scss') ] }) }) } }
步骤3:测试阶段,和方法一的步骤3一样。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持IIS7站长之家。