项目中使用 CSS Modules 用法

CSS Modules 用法 地址：阮一峰博客教程

一、案例 https://github.com/ruanyf/css-modules-demos

$ git clone https://github.com/ruanyf/css-modules-demos.git

二、配置 webpack.config.js。

module.exports = {
  entry: __dirname + '/index.js',
  output: {
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      // {
      //   test: /\.css$/,
      //   loader: "style-loader!css-loader?modules"
      // },
      // 
      {
        // 这里是匹配的文件名称（此处假设我需要 scopedcss 的 css文件: a.scopedcss）
        test: /\.scopedcss$/,  
        loader: "style-loader!css-loader?modules" // 这里是使用对用的loader处理
      },
    ]
  }
};

标签加入样式

查看控制台打印

三、自定义编译后的样式哈希值

  {
    test: /\.scopedcss$/,
    loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]123456789"
  },