css loader.net,在vue-cli中使用css-loader实现css module

本文介绍了如何在Vue项目中采用CSS-Loader实现CSS模块化,包括配置方法及与Vue原生解决方案的对比。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

【前言】

无论是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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值