使用webpack实现css的模块化

css实现模块化的目的主要是为了使得所引入的样式文件只对当前文件内容有效，不会影响其他文件的样式。webpack.config.js文件里面的css-loader加一个配置modules: true。

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  name: '[name]_[hash].[ext]',
                  outputPath: 'images/',
                  limit: 400000
                }
              }
            ]
          },
          {
            test: /\.css$/,
            loader: ['style-loader', 'css-loader']
          },
          {
            test: /\.scss$/,
            loader: ['style-loader', 
                      {
                        loader: 'css-loader',
                        options: {
                          importLoaders: 2,
                          modules: true
                        }
                      },
                      'sass-loader', 
                      'postcss-loader'
                    ]
          }
        ]
      },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

引入样式文件的时候，引入方法修改一下：

 

 -end-