webpack 之 css module

webpack 之 css module

webpack配置
css-loader?modules
modules 字段表示开启css module

定制css类名规则
modules&localIdentName=[path][name]---[local]---[hash:base64:5]
localIdentName 字段定义css类名规则

引入：
import style from './App.css';
style.title{}

全局：
:global()
eg:
:global(.title){}

class组合:
composes:classname;

引入其他模块:
composes: classname from ’./style.css’;

引入变量：（postcss-loader ；postcss-modules-values）

1. web pack配置增加 postcss: [require('postcss-modules-values') ]
2. 语法（注意‘: ’ 号后空格，去掉会报错！）
   @value green: #aaf200; 定义变量
   @value colors: "./colors.css";
   @value blue, red, green from colors;