vue 公共样式处理_全局styl文件

Posted 2020-12-03 liuzhouyuan

ue2.0中，在main.js文件里引入了index.styl文件，在其他组件中样式不生效。 只能通过在当前组件里去引用.styl文件才有效果，这是什么情况。 如果页面很多了，那不是每个页面都要引入这个.styl文件吗？有什么方式，只需要在入口文件引入一次，其它页面不需要引入了吗？ 

在 build utils exports.cssLoaders 下  配置 

 

 

var stylusOptions = {
import: [
path.join(__dirname, "../src/components/common/stylus/index.styl"), // variables.styl全局变量文件
],
paths: [
path.join(__dirname, "../src/components/common/"),
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),
}

然后在index.styl中import 其他styl文件。。。这样就一次性导入了，不用一个个页面导入