无论是vue还是react的css模块化解决方案都是依赖loader来实现的 在使用上,vue中用scoped属性实现样式的私有化,利用深度作用选择器/deep来实现样式的去私有化。
例子:
<div> <div class="demo"> <div class="child"></ div> </div> </div> <script> // some code <script/> <style lang="less" scoped> .demo { height: 100px; padding-top: 20px; background-color: grey; /deep/.child { color: red; } } </style>
在react中使用上是这么搞的(基于css-loader):
//test.less .demo { height: 100px; padding-top: 20px; background-color: grey; :global(.child) { color: red } }
import styles from './test.less' // some code <div className={styles.demo}> <div class="child"></div> </div>
如果硬要在vue中使用css-loader实现css module的这套解决方案呢?这里以vue-clie 3.x为例。
无论在vue的脚手架vue-cli中还是在react的脚手架umi中,,现在都使用了webpack-chain来实现配置webpack.
这里在vue-cli脚手架创建的项目根目录下,新建vue.config.js,并写入如下内容:
module.exports = { chainWebpack: (config) => { config.devServer .proxy({ '/api': { target: 'http://localhost:3000', pathRewrite: { '^/api': '', }, }, }) .port(9000); config.module .rule('less') .oneOf('normal-modules') .test(/.less$/) .use('css-loader') .tap(options => { return Object.assign(options, { modules: { localIdentName: '[name]__[local]___[hash:base64:5]', auto: /\.less$/i, }, }) }); }, };
本来其实也不用写这段内容,默认情况,vue-cli的脚手架已经配置了css-loader的模块化,但是需要把less文件命名成xxx.module.less的形式,这和umi那套不同,也不方便,这样配置然后重启,就能像react一样写css了,另外把引入的style存入data中。这里只是说下可以在vue-cli使用css-loader的那套解决方案,但最佳实践还是用vue自带的那套。
完
以上就是如何在vue-cli中使用css-loader实现css module的详细内容,更多关于vue-cli中使用css-loader实现css module的资料请关注站长技术其它相关文章!
随着人们对电脑便携度的要求越来越高,现在很多小伙伴在购买电脑的时候,都是直...
前言 meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实...
公司要做一个活动页面,在其过程中发现所有的接口,ajax请求跨域。这里对跨域做...
本文实例讲述了TP3.2框架分页相关实现方法。分享给大家供大家参考,具体如下: ...
复制代码 代码如下: title=request("title") title=replace(title,"chr(34)","""...
这里介绍三种常用的提交方式 方式一 手工收集所有的用户输入,封装为大的“k1=v1...
作者 |?写代码的明哥 来源 |Python编程时光ID: Cool-Python 如何在运行状态查看...
目录 读者基础 ?微服务架构梳理 https://www.coder4.com/homs_online/ ? ? 读者...
写在前面 本文涉及面较广,篇幅较长,阅读完需要耗费一定的时间与精力,如果你带...
一、简介 本设计为硬币图像识别统计装置通过数码相机获取平铺无重叠堆积的硬币的...