vue-cli3 关于样式引入的问题 ---- style-resources-loader

深碍√TFBOYSˉ_ 2021-11-16 11:32 636阅读 0赞

问题描述：

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

解决方案：

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

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

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

![612939-20190531141308775-1283209787.png][]

然后重启一下项目，运行 npm run serve 就可以了

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

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

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

参考地址1：http://www.pianshen.com/article/591366072/

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

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

转载于:https://www.cnblogs.com/jjjjyyyy/p/10955025.html

[612939-20190531141308775-1283209787.png]: /images/20211116/8a92264e9ea54d8882126d5768ef4843.png

发表评论取消回复

表情：

评论列表（有 0 条评论，636人围观）

还没有评论，来说两句吧...

相关阅读

相关 VueCli3项目解决打包问题

背景描述：自己之前做了一个vue的小案例，但是从来没有用过npm run build,果真遇到了挺多令人头疼的问题！然后在这里和大家分享一下！项目技术：VueCli3脚手

ゞ浴缸里的玫瑰/ 2023年09月26日 10:01/ 0 赞/ 133 阅读

相关 html之css关于引入样式的优先级

结论： `!important>内联样式>内部样式>外部样式` 引入css样式的方法行内式（内联，内嵌） <p style=“font-size:2

Dear 丶/ 2023年06月23日 02:49/ 0 赞/ 47 阅读

相关 vuecli3.0全局引入jquery

之前使用jquery都是每个组件引入 import $ from 'jquery' 这种方式需要在每个要使用jquery的组件里面引入一下，比较麻烦，分享一下全局引

约定不等于承诺〃/ 2023年06月15日 09:53/ 0 赞/ 62 阅读

相关 vuecli3 多页面配置

vuecli3 多页面配置项目结构 1. login文件配置（有配置路由） login文件目录 lo

落日映苍穹つ/ 2023年01月19日 03:24/ 0 赞/ 461 阅读

相关快速部署vuecli3 vuecli搭建 vuecli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2022年12月22日 11:07/ 0 赞/ 364 阅读

相关 css 样式引入的优先级

参考： [https://www.cnblogs.com/shengtianlong/archive/2010/08/11/1797667.html][https_www.cn

- 日理万妓/ 2022年06月04日 08:42/ 0 赞/ 356 阅读

相关关于引入文件名字问题

db.properties url = 127.0.0.1 userName = root password = 123456 当文件名为userN

秒速五厘米/ 2022年05月28日 00:38/ 0 赞/ 217 阅读

相关 CSS样式引入

我们已经学习了行内、内嵌和外链三种方式来引入我们的 CSS 样式，这里我们再深入探讨下。行内方式通过给元素添加 style 属性来添加样式，如下： <di

小灰灰/ 2022年05月27日 09:44/ 0 赞/ 364 阅读

相关使用vuecli3配置vux2热更新的问题

首先贴一下解决的代码 ![70][] 需要注意的是，我之前baseUrl都配错了，刷新的报错 “<”的错误，其实就是路径的问题，刷新后找不到文件上次用vuecli

绝地灬酷狼/ 2022年05月14日 06:26/ 0 赞/ 362 阅读

相关 vue-cli3 关于样式引入的问题 ---- style-resources-loader

问题描述：在样式引入时，对于变量的引入，需要在每个文件里都要引入一遍，为了避免每次使用时都需要单独引入一遍的问题，采用了style-resources-loader 解决

深碍√TFBOYSˉ_/ 2021年11月16日 11:32/ 0 赞/ 637 阅读