vue 修改引入组件的样式,vue批量引入组件
本文主要介绍了vue project如何自动将全局样式文件注入到组件中，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
Less和Stylus安装样式-资源-加载器配置在vue.config.jsSass/Scss扩展的开发过程中，随着项目的变大，不可避免的要提取一些常用的样式，比如变量、mixins、函数等。几乎用于所有业务组件：
- src
-风格
-变量. less
-混合少
-功能更少
如果每个必需的组件都必须手动导入一次，那就太麻烦了：
script lang=less
@导入./styles/variables ；
@导入./styles/mixins ；
@导入./style/functions ；
//其他样式
/脚本
当然，最直接的改进方案是创建一个包含导入条目样式的entry.less文件，然后导入到各个组件中：
//entry.less
@import 。/variables ；
@import 。/mixins ；
@import 。/functions ；
script lang=less
@导入./styles/entry ；
//其他样式
/脚本
不过手动导入毕竟复杂，如果能自动导入就太好了。幸运的是，配置自动导入并不复杂。这里以Less、Stylus、Sass/Scss等常见的前置处理器为例，说明如何在vue项目中配置自动导入：
Less和Stylus
配置Less和Stylus的自动导入有两种方案：
使用样式-资源-加载器使用vue-CLI-plugin-style-resources-loader。这里推荐使用第一种，因为第二种只是第一种的打包，暂时不支持热更新。
安装style-resources-loader
$ npm i -D样式-资源-加载程序
配置vue.config.js
如果项目根目录下没有vue.config.js文件，只需手动创建即可，然后插入以下代码：
//vue.config.js
const path=require(path )
模块.导出={
chainWebpack: config={
常量类型=[vue-modules ， vue ， normal-modules ， normal]
types . foreach(type=addStyleResource(config . module . rule( less )。oneOf(type))) //A
},
}
函数addStyleResource(规则){
rule.use(“样式-资源”)。加载程序(“样式-资源-加载程序”)。选项({
模式：[
path.resolve(__dirname，。/src/styles/entry.less )，//B
],
})
}
如果您想要配置多个导入，只需在B行之后继续添加：
模式：[
path.resolve(__dirname，。/src/styles/entry1.less )，
path.resolve(__dirname，。/src/styles/entry2.less )，
],
如果项目使用样式，请用types . foreach(type=addstyleresource(config . module . rule( Styles )替换行A。Oneof (type))和带有* path.resolve (_ _ dirname，)的B行。/src/styles/entry.stylel
Sass/Scss
其实上面的方案也可以用于Sass/Scss配置的自动导入，但是用它的原生方案更方便，在vue.config.js中配置就可以了：
//vue.config.js
模块.导出={
css: {
loaderOptions: {
萨斯：{
prepend data:` @ import @/styles/entry . scss ；`//A
}
}
}
}
如果您想要配置多个导入，只需将它们添加到行A:
//vue.config.js
模块.导出={
css: {
loaderOptions: {
萨斯：{
前置数据：` 1
@ import @/styles/entry 1 . scss ；
@ import @/styles/entry 2 . scss ；
`
}
}
}
}
注意：在sass-loader@8.0.0之前，上面的prependData应该替换为Data。
扩展
如果在使用vue create创建项目时没有选择手动选择功能或CSS预处理程序，则默认情况下，项目中将使用原生CSS。但是，vue的默认Webpack配置内置了对CSS预处理程序的支持，所以您只需要安装响应依赖项，然后在项目文件中使用相应的语法编写样式：
//更少
$ npm内径减装载机
//Sass/Scss
$ npm i -D节点-sass sass-加载程序
//手写笔
$ npm i -D唱针唱针加载器
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。