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">
 <!-- <header :class="$style.mainHeader">  ==  <header class="main-header"> 
  用了module頁面class就生成獨一無二的 class="client-layout--header-2AE8s_0"
   -->
    <h1>JTodo</h1>
  </header>
</template>
<!--使用module-->
<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>
    )
  }
}

　　

如圖id名字編程了定義好的規則

 

這樣也可以起到一個加密的作用。

 

 

 

有不對的地方請大神多多指教。互相借鑒