这篇文章主要介绍了如何在vue-cli中使用css-loader实现css module，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
【前言】
无论是vue还是react的css模块化解决方案都是依赖loader来实现的 在使用上，vue中用scoped属性实现样式的私有化，利用深度作用选择器/deep来实现样式的去私有化。
例子：
<div> <div class="demo"> <div class="child"></div></div></div> // some code .demo { height: 100px; padding-top: 20px; background-color: grey; /deep/.child { color: red; } }
在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> <div class="child"></div> </div>
不得不说，在使用上还是vue比较方便。
如果硬要在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:ba<i style="color:transparent">本文来源gaodai$ma#com搞$$代**码网$</i>se64: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的资料请关注gaodaima搞代码网其它相关文章！
您可能感兴趣的文章:
- Vue+scss白天和夜间模式切换功能的实现方法
- vue中配置scss全局变量的步骤
- 在vue中动态修改css其中一个属性值操作
- 在Vue中使用CSS3实现内容无缝滚动的示例代码
- 解决vue scoped scss 无效的问题
- Vue打包部署到Nginx时,css样式不生效的解决方式
- Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码
- Vue3新特性之在Composition API中使用CSS Modules
- Vue + Scss 动态切换主题颜色实现换肤的示例代码
- Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
- vue css 引入asstes中的图片无法显示的四种解决方法
- Vue如何使用CSS自定义变量
以上就是如何在vue-cli中使用css-loader实现css module的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：如何在vue-cli中使用css-loader实现css module
转载请注明原文链接：如何在vue-cli中使用css-loader实现css module
