vue中cssModules理解可以用于加密和避免重复使用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

cssModules可以用于加密和避免重复使用，也就是说可以在当前vue文件中写的样式会生成独一无二的名字，在其他vue文件中是无法调用的，

一、可以直接配cssModules

第一步，配置vue-loader.js文件

const docsLoader = require.resolve('./doc-loader')
module.exports = (isDev) =>{
return {
...
cssModules:{
//在当前vue文件中写的样式会生成独一无二的名字，在其他vue文件中是无法调用的
localIdentName:'[path]-[name]-[hash:base64:5]',
//把css类名为‘-’连接的，转化为驼峰的
//详情见header.vue 如果要vue中css样式用camelCase方法需要在style标签中配置module
camelCase:true
}
...}
}

第二步在webpack.config.base.js中配置如下

！！也不一定是webpack.config.base.js 只要是执行用vue-loader 打包vue文件的地址多配置一条即可。

const createvueLoaderOptions = require('./vue-loader.config')

...
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options:createvueLoaderOptions(isDev)
},
...

第三步在vue文件中使用module

<template>
<header :class="$style.mainHeader">

<h1>JTodo</h1>
</header>
</template>

<style lang="stylus" module>
.main-header{
text-align center
h1{
font-size 100px
color: rgba(175, 47, 47, 0.4)
font-weight 100
margin 20px
}
}
</style>

浏览器中网页生成的class如图

二、如果想使用css-loader的时候也如上可以自定义name如何做呢？

第一步配置一个option定义一个规则

...
module:{
rules:[
{
test: /\.styl/,
use: [
'vue-style-loader',
{
loader:'css-loader',
options:{
module:true,
//可以开启一个localIdentName
localIdentName:isDev ? '[path]-[name]-[hash:base64:5]':'[hash:base64:5]',
}
},
]
}
]
},
...

第二步如何使用呢?如下

import '../assets/styles/footer.styl'export default {
data() {
return {
author: 'Jokcy'
}
},
render() {
return (
<div id="footer">
<span>Written by {this.author}</span>
</div>
)
}
}

上面的代码改成如下代码

import classNames from'../assets/styles/footer.styl'export default {
data() {
return {
author: 'Jokcy'
}
},
render() {
return (
<div id={classNames.footer}>
<span>Written by {this.author}</span>
</div>
)
}
}