mpvue配置stylus全局变量文件,不用每个stylus文件都引入

  • A+

一、stylus的基本使用

1、下载安装stylusstylus-loader

  1. npm i stylus stylus-loader -D

2、webpack中的配置(可选)

//  配置文件 build/webpack.base.conf.js

rules中添加

  1. {
  2.         test: /\.styl$/,
  3.         loaders: ['style-loader', 'css-loader', 'stylus-loader']
  4.       },

3、配置文件build/until.js

generateLoaders方法的后面!后面!后面!(强调)

  1. const stylusOptions = {
  2.     import: [path.join(__dirname, "../src/stylus/variables.styl")],  //你公共样式存放的位置
  3.     paths: [path.join(__dirname, '../src/stylus'), path.join(__dirname, '../')]  //公共样式文件位置
  4.   }
  5. return {
  6.     css: generateLoaders(),
  7.     wxss: generateLoaders(),
  8.     postcss: generateLoaders(),
  9.     less: generateLoaders('less'),
  10.     sass: generateLoaders('sass', { indentedSyntax: true }),
  11.     scss: generateLoaders('sass'),
  12.     stylus: generateLoaders('stylus', stylusOptions),  //红色文字对应上方配置
  13.     styl: generateLoaders('stylus')
  14.   }

修改配置文件后,一定要记得重启服务

本文章懂者会用,不懂者就需要先去了解一下为啥需要配置这个内容了

原因:在每一个需要使用变量的component组件中都需要单独引入index.styl文件,不仅进行了多

次重复性的操作,而且文件名称一旦发生改变,维护更新非常麻烦,非常的不人性化。

 

weinxin
我的微信
这是我的微信扫一扫
kiven

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: