脚本宝典收集整理的这篇文章主要介绍了在vue-cli中使用css-loader实现css module，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
【前言】
无论是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比较方便。
如果硬要在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 module内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的在vue-cli中使用css-loader实现css module全部内容，希望文章能够帮你解决在vue-cli中使用css-loader实现css module所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。