这篇文章是为了了解css模块化的用法和原理，穹顶地址：cssmodules?详情可以访问我的博客lisaoy.net局部作用域一般我们在页面中引入CSS的作用域是全局的，都在这个页面上工作，生成一个局部作用域，就是用一个唯一的类名，不会与其他选择器同名。CSSModules就是这个原则。我们来看一段代码import$from'jquery';importstylesfrom'./main.css';importtestfrom'./test.html';$('body').append($('

'));$('divh1').addClass(styles.testGreen);$('body').append(test).find('h2').addClass(styles.testBlue);在上面的代码中，我在style对象中输入了main.css，然后使用styles.testGreen对象的属性形式调用，就会应用main.css中的style.testGreen{color:green;}的构建工具（webpack）将其编译成哈希字符串main.css也被编译._305zeUSoiGREv3GqPa9H8F{color:#aaf200;}中这样，这个类名是唯一的，并且只对应用程序的组件有效。CSSModules支持不同的构建工具，这里我使用的是webpack，下面是webpack的例子。我们看一下webpack.config.jsmodule.exports={context:__dirname+'/src',devtool:'eval-source-map',//ConfigureandgenerateSourceMaps,选择合适的optionentry:{app:['./app.js','./test.js'],},输出:{路径:__dirname+'/dist',文件名:'bundle.js',publicPath:'/assets',},模块:{loaders:[{test:/\.json$/,loader:'json-loader'},{test:/\.js$/,exclude:/node_modules/,loader:'babel-loader'},{test:/\.css$/,loader:ExtractTextPlugin.extract({fallbackLoader:"style-loader",loader:{loader:"css-loader",query:{modules:true}}})},{测试:/\.html$/,loader:'html-loader'},]},插件:[newExtractTextPlugin('style.css')]};从上面的代码可以看出，query:{modules:true}的意思是启用CSS，这里也配置了Modules模块，将所有的css合并到一个文件中。具体可以了解webpack的extract-text-webpack-plugin插件。全局作用域CSS模块允许使用语法:global(.className)声明全局作用域。添加:global不会被编译成哈希值。:global(.title){color:black;}.title{color:red;}test.js使用正常写法，会引用.title的全局样式import$from'jquery';importstylesfrom'./main.css';importtestfrom'./test.html';$('body').append($(''));$('divh1').addClass('标题');结果，h1的标题显示为黑色。类的组合在CSS模块中，一个选择器可以继承另一个选择器。在mian.css中，我让.testBlue继承了.testBg类。testBg{background-color:red;}.testBlue{color:blue;composes:testBg;}不需要修改test.js，应用.testBlue就会出现红色背景。编译结果：.eh33VC37uFHXkCZ8LfKYd{background-color:#ff0000;}.xrmZso54fTBX29J9G65Ai{color:#0c77f8;}相关的html代码：我会变蓝输入变量CSS模块支持使用变量，但是必须安装PsotCSS和postcss-modules-values$npminstall--savepostcss-loaderpostcss-modules-values将postcss-loader添加到webpack.config.js.{test:/\.css$/,loader:'style-loader!css-loader?modules!postcss-loader'}，我在colors.css中定义了一些变量。@值蓝色：#0c77f8；@值红色：#ff0000；@值绿色：#aaf200；在main.css中，您可以引用这样的变量@valuecolors:"./color.css";@valueblue,red,greenfromcolors;.title{color:red;}.testBg{background-color:red;}.testGreen{颜色：绿色；}.testBlue{颜色：蓝色；编写：testBg；composes:div;}这样颜色。把css的变量拿过来用是不是很神奇。