标签：plugins nbsp plugin UNC 简单的 styles tomat from select
css modules需要使用webpack这种打包工具实现。其思想是，使js文件可以导入css模块，并且导入的是一个对象。然后js可以使用这个对象的里的属性作为html元素的类名，webpack的插件最终会将css里的选择器和js里的类名用一个唯一的字符串代替，这样css里的属性就只会被用于导入了这个css文件的js所生成的html。css modules要求使用js生成所有的html。下面是一个简单的使用css modules的例子:
1 2 3 4 5 6
| import styles from "./styles.css"; element.innerHTML = `<h1 class="${styles.title}"> An example heading </h1>`;
|
composes关键字使一个类可以引用其他类的样式:
1 2 3 4 5 6 7 8 9
| .serif-font { font-family: Georgia, serif; } .display { composes: serif-font; font-size: 30px; line-height: 35px; }
|
使用css modules
在一个新文件夹下初始化一个npm项目:
安装webpack:
1 2 3
| npm i -D webpack // or npm install webpack --save-dev
|
新建一个webpack配置文件webpack.config.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| const HtmlWebpackPlugin = require('html-webpack-plugin'); const path=require('path'); const PATHS = { app: path.join(__dirname, 'src'), build: path.join(__dirname, 'build'), }; module.exports={ entry:{ app:PATHS.app }, output:{ path:PATHS.build, filename:'bundle.js' }, plugins: [ new HtmlWebpackPlugin({ title: 'Webpack demo' }) ] };
|
上面的entry和path要写绝对路径，html-webpack-plugin用于自动生成index.html。
要在项目中使用es6语法，需要安装下面的npm模块:
1
| npm i -D babel-loader babel-core babel-preset-es2015
|
在webpack.config.js中加上loader:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| module.exports = { entry: './src', output: { path: 'build', filename: 'bundle.js', }, module: { loaders: [ { test: /.js/, loader: 'babel-loader', include: __dirname + '/src', } ], } };
|
处理css需要使用css-loader和style-loader:
1
| npm i -D css-loader style-loader
|
添加一个index.css:
1 2 3
| .text { color:tomato; }
|
index.js:
1 2 3 4
| import style from './index.css'; const text=`<div class="${style.text}">hello world!</div>`; window.onload=()=>document.body.innerHTML=text;
|
注意在index.js中给元素添加class名时不是直接用css中的选择器（text），而是用对象的属性（style.text）。
并更改配置文件:
1 2 3 4 5
| { test:/.css/, loader:'style-loader!css-loader?modules', include:path.join(__dirname,'src') }
|
css-loader后面加了一个查询参数modules，表示打开 CSS Modules 功能。
运行index.html后，打开devtool，可以看到div的class名为_3e3Tpl6iY2cwXJCwpTZ4dc，这是由webpack的loader自动生成的。并且head中多了一个style标签:
1 2 3
| <style type="text/css">._3e3Tpl6iY2cwXJCwpTZ4dc { color:tomato; }</style>
|
上面的内联style是style-loader生成的，为了生成一个独立的css文件，可使用:
1
| npm i -D extract-text-webpack-plugin
|
原文:大专栏 初探css modules
初探css modules
标签：plugins nbsp plugin UNC 简单的 styles tomat from select
原文地址：https://www.cnblogs.com/wangziqiang123/p/11618472.html
