目录
目录
文章目录
  1. 概述

React之CSS Module

2017.06.17 Shaowei_Teng React  热度 ℃

概述

  • 在React中，CSS以模块的形式出现在JS文件中，那么在Webpack的配置文件中需要配置css-loader和style-loader，并开启css-loader的modules参数。
    • 这样的后果是把css都打包进了bundle.js文件中，那么在html页面中就不用引入css样式了。但是，这有个缺点，您将无法利用浏览器的异步和并行加载CSS的能力。这样，您的网页必须等待，直到您的整个JavaScript 包下载完成，然后重绘网页。

  • 解决方法是提取css，把css从bundle.js中提取出来，但是需要在html中显示引入css样式！！！使用插件，extract-text-webpack-plugin。

    • 安装npm i --save-dev extract-text-webpack-plugin

    • 那么Webpack的配置文件需要重新修改了：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      webpack.config.js
      const ExtractTextPlugin = require('extract-text-webpack-plugin');
      module.exports = {
      	
      	module: {
      		
      		rules: [
      			{
      				test: /\.css$/,
      				use: ExtractTextPlugin.extract({
      					fallback: 'style-loader',
      					use: 'css-loader?modules'
      				})
      			
      			}
      		]
      	
      	},
      	
      	plugins: [
      	
      		new ExtractTextPlugin('bundle.css')
      	
      	]
      }