关于 stylus的全局变量的配置
如何在vue项目当中在每个组件中都能使用stylus定义的变量(比如基准值)
主要是在build/utils的配置文件的cssLoaders函数中
const stylusOptions = { import:[ path.join(__dirname, "../src/common/variables.styl") ], paths:[ path.join(__dirname, "../src/common/"), path.join(__dirname, "../") ] } // https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus', stylusOptions), styl: generateLoaders('stylus', stylusOptions) }
OK配置完成
效果:
width (490/$rem) height (120/$rem) position absolute top (785/$rem) left 50% margin-left (-245/$rem) background-color #efca7d