stylus全局一次性引入使用 vue

stylus全局使用 vue

注意：这个博客是基于vue-cli3.0使用的，只需要引入一次stylus文件，之后就不需要再在每个vue文件引入了，方便修改，sass和stylus的操作基本相同
在vue-cli官方文档中写的有相关属性css.loaderOptions介绍——vue-cli官方文档介绍


1.安装stylus和stylus-loader

(-D是save dev的缩写，代表是生产环境需要使用的，-S是save的缩写，是开发环境需要使用的)

npm install stylus  stylus-loader  -D

2.在src根目录下新建一个index.styl文件（stylus的文件名后缀是".styl"），文件中写入需要定义的变量

3.在main.js中引入index.styl文件
(@代表src根目录)

import '@/index.styl'

4.经过以上处理，是不能在其他vue文件中直接使用变量，还需要在vue.config.js文件中配置一下

css: {
        loaderOptions: {
          // 给 stylus-loader 传递选项
          stylus: {
            import: '~@/index.styl'
            // data: `@import: "~@/index.styl;"`   //sass的引入格式
          }
        }
    },

5. 在其他vue文件中直接使用变量名称，不需要再在每个vue文件中引入styl文件了