添加一个公共样式variable.styl样式,包含一些公共的变量
// 颜色
$color-mainFont = #333333
$color-placeholder = #aaaaaa
$color-inputborder = #e5e5e5
$color-buttonSure = #5783e6
$color-buttonCancle = #999999
// 字体
$font-size-large = 36px
$font-size-medium = 18px
$font-size-small = 16px
如何全局引入?需要在build/utils.js的generateLoaders方法下做如下修改
const stylusOptions = {
import: [
path.join(__dirname, "../src/styles/variable.styl"), // variables.styl全局变量文件
],
paths: [
path.join(__dirname, "../src/styles/"),
path.join(__dirname, "../"),
],
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders(‘less’),
sass: generateLoaders(‘sass’, { indentedSyntax: true }),
scss: generateLoaders(‘sass’),
stylus: generateLoaders(‘stylus’,stylusOptions),
styl: generateLoaders(‘stylus’,stylusOptions)
}
具体原因可查看
https://vue-loader-v14.vuejs.org/zh-cn/configurations/pre-processors.html