初探css modules

Posted 2022-12-15 wangziqiang123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初探css modules相关的知识，希望对你有一定的参考价值。

css modules需要使用webpack这种打包工具实现。其思想是，使js文件可以导入css模块，并且导入的是一个对象。然后js可以使用这个对象的里的属性作为html元素的类名，webpack的插件最终会将css里的选择器和js里的类名用一个唯一的字符串代替，这样css里的属性就只会被用于导入了这个css文件的js所生成的html。css modules要求使用js生成所有的html。下面是一个简单的使用css modules的例子:

import styles from "./styles.css";
element.innerHTML = 
  `<h1 class="$styles.title">
     An example heading
   </h1>`;

composes关键字使一个类可以引用其他类的样式:

.serif-font 
  font-family: Georgia, serif;
.display 
  composes: serif-font;
  font-size: 30px;
  line-height: 35px;

使用css modules

在一个新文件夹下初始化一个npm项目:

1	npm init --y

安装webpack:

1
2
3

npm i -D webpack 
// or
npm install webpack --save-dev

新建一个webpack配置文件webpack.config.js:

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:

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:

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）。
并更改配置文件:


    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的主要内容，如果未能解决你的问题，请参考以下文章