c3等待加载样式vue_vuecli3关于样式引入的问题styleresourcesloader

问题描述&＃xff1a;

在样式引入时&＃xff0c;对于变量的引入&＃xff0c;需要在每个文件里都要引入一遍&＃xff0c;为了避免每次使用时都需要单独引入一遍的问题&＃xff0c;采用了style-resources-loader

解决方案&＃xff1a;

步骤1&＃xff1a;在项目目录下安装该插件 npm install stylus-resources-loader --save-dev 或者 vue add style-resources-loader

步骤2&＃xff1a;然后会有一个让选择语言的选项CSS Pre-processor?&＃xff0c;选择当前应用的语法&＃xff0c;scss、sass、stylus和less&＃xff0c;我目前选择的是stylus

步骤3&＃xff1a;在项目根目录下的vue.config.js(没有需要新建)下修改配如下截图&＃xff1a;

然后重启一下项目&＃xff0c;运行 npm run serve 就可以了

至于为什么直接在main.js里引入一个index.styl文件也不生效的我也有困惑

问&＃xff1a;关于这个变量模板的引入&＃xff0c;不是已经在 index.styl 引入了么&＃xff0c;和 icon.styl 和 reset.styl 一样&＃xff0c;我困惑的是既然引入了 &＃xff0c;为什么在单文件里还需要引入这个变量模板&＃xff0c;但是别的不需要再重复引入了&＃xff0c;比如 icon.styl

答&＃xff1a;从 stylus 编译的角度去思考这个问题&＃xff0c;当你去编译某个组件的 stylus 文件&＃xff0c;它使用了某个变量&＃xff0c;如果没有去 import variable&＃xff0c;它怎么知道这个变量是什么。你所谓的 index&＃xff0c;只是你认为它是首页&＃xff0c;但是对 stylus 编译器来说它却一无所知。而 style-resource-loader 做的事情&＃xff0c;才是告诉 stylus 编译器&＃xff0c;我引用了一些全局变量&＃xff0c;如果你找不到的时候&＃xff0c;从我这儿来拿。

参考地址1&＃xff1a;http://www.pianshen.com/article/591366072/

参考地址2&＃xff1a;https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader

参考地址3&＃xff1a;https://cli.vuejs.org/zh/guide/css.html#%E8%87%AA%E5%8A%A8%E5%8C%96%E5%AF%BC%E5%85%A5