【前言】
无论是vue还是react的css模块化解决方案都是依赖loader来实现的在使用上,vue中用scoped属性实现样式的私有化,利用深度作用选择器/deep来实现样式的去私有化。
例子:
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
不得不说,在使用上还是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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!