vue-style-loader!css-loader,Vue-loader

　　[前言]

　　vue和react的css模块化解决方案都依赖于loader。在使用中，vue使用scoped属性来私有化样式，使用deep action selector /deep来私有化样式。

　　示例：

　　div div class= demo div class= child /div/div script//某些代码脚本/样式lang=less 作用域。demo { height:100px；padding-top:20px；背景颜色：灰色；/深/。儿童{颜色：红色；} }/style用在react里是这样的(基于css-loader):

　　//test . less . demo { height:100px；padding-top:20px；背景颜色：灰色；全局(。child) {color: red}}从导入样式。/test . less //some code div class name={ styles . demo } div class= child /div/div。不得不说用起来比较方便。

　　如果坚持用vue中的css-loader来实现css模块的这个解决方案呢？这里以vue-clie 3.x为例。

　　无论是在vue的scaffolding vue-cli中还是在react的scaffolding umi中，现在都使用webpack-chain来配置webpack。

　　这里，在vue-cli scaffold创建的项目的根目录下，新建一个vue.config.js，并写入以下内容：

　　module . exports={ chain web pack:(config)={ config . devserver。代理({ /API :{ target: http://localhost:3000 ，pathRewrite: { ^/api: ，}，}，})。端口(9000)；配置模块。规则( less )。Of之一(“正常模块”)。测试(/。减去$/)。使用( css-loader )。tap(options={ return object . assign(options，{ modules:{ local identname:[name]_ _[local]_ _ _[hash:base64:5]，auto: /\。少$/i，}，})})；},};其实没必要写这一段。默认情况下，vue-cli的脚手架已经配置了css-loader的模块化，但是less文件需要命名为xxx.module.less，与umi的不同，不方便。这种配置和重启将使您能够像react一样编写css。此外，引入的样式将存储在数据中。这里只是可以在vue-cli中使用css-loader的解决方案，但最佳实践还是用vue自带的那套。

　　关于在vue-cli中使用css-loader实现css模块的文章到此结束。有关在vue-cli中使用css模块的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。