【注意:// NOTE 在 sass 中通过别名(@ 或 ~)引用需要指定路径 !!!!!】
【1】config/index.js 配置
添加以下代码:
const path = require('path')
// NOTE 在 sass 中通过别名(@ 或 ~)引用需要指定路径
const sassImporter = function(url) {
if (url[0] === '~' && url[1] !== '/') {
return {
file: path.resolve(__dirname, '..', 'node_modules', url.substr(1))
}
}
const reg = /^@styles\/(.*)/
return {
file: reg.test(url) ? path.resolve(__dirname, '..', 'src/styles', url.match(reg)[1]) : url
}
}
const config = {
...省略...
...省略...
plugins: {
...省略...
sass: {
importer: sassImporter
}
},
h5: {
....省略...
sassLoaderOption: {
importer: sassImporter
}
},
}
【2】设置全局通用的scss变量,比如主题色,字体颜色,border颜色等
【3】在相应使用的scss文件中,引入定义了全局变量的scss文件,直接使用即可!!!