zoukankan      html  css  js  c++  java
  • CSS Modules In Webpack

    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

  • 相关阅读:
    [bzoj4893]项链分赃
    [Spoj]Counting Divisors (cube)
    [Noi2016]国王饮水记
    [Noi2016]网格
    [Noi2016]优秀的拆分
    [Noi2016]区间
    [Noi2015]寿司晚宴
    Codeforces Round #411 (Div. 2)
    VK-Cup2017 Wild Card Round 2
    [Noi2015]小园丁和老司机
  • 原文地址:https://www.cnblogs.com/dahe1989/p/9565767.html
Copyright © 2011-2022 走看看