欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS Modules In Webpack

程序员文章站 2023-03-26 11:50:04
1)从形式上看,CSS Modules 是将CSS中的选择器转换为变量,然后在DOM中引用变量来引入样式。 2)从效果上看,CSS Modules 可以将CSS选择器名字转成随机字符串,保证选择器同名也不会冲突。 3)在Webpack中使用,需要为css-loader增加modules 4)代码引入 ......

1)从形式上看,css modules 是将css中的选择器转换为变量,然后在dom中引用变量来引入样式。

2)从效果上看,css modules 可以将css选择器名字转成随机字符串,保证选择器同名也不会冲突。

3)在webpack中使用,需要为css-loader增加modules

// webpack 1.x

{
    test: /\.css$/,
    loader: "style-loader!css-loader?modules"
},


// webpack 2.x
{
  test: /\.css$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: true,
      }
    }
  ]
}

4)代码引入方式

// css 
.contenttitle {
  color: red;
}

// react
import react from 'react';
import style from './app.css';

export default () => {
  return (
    <h1 classname={style.contenttitle}>
      hello world
    </h1>
  );
};

5、生成的页面中选择器变化

// html
<h1 class="_3zyde4l1yatcokgn-dbwel">
  hello world
</h1> 

// css
._3zyde4l1yatcokgn-dbwel {
  color: red;
}

6、node_modules内代码不处理

{
  test: /\.css$/,
  loader: 'style-loader!css-loader?modules',
  exclude:[path.resolve(__dirname, '..', 'node_modules')]
}, {
  test: /\.css$/,
  loader: 'style-loader!css-loader',
  include:[path.resolve(__dirname, '..', 'node_modules')]
},

 

https://github.com/webpack-contrib/css-loader#modules

https://www.cnblogs.com/walls/p/9153555.html

http://www.ruanyifeng.com/blog/2016/06/css_modules.html

https://segmentfault.com/a/1190000004990977

https://github.com/camsong/blog/issues/5

https://github.com/webpack-contrib/css-loader/issues/282