样式处理——导入样式

该篇文章主要讲的就是在 Webpack 中简单配置 CSS 样式文件的处理。

认识两个 loader

style-loader：在 HTML 页面中插入 style 标签，并把样式内容拷贝到 style 标签中
css-loader：支持在 js 中通过 import 的方式导入样式文件

准备工作

首先，还是把需要的依赖安装一下 package.json：

  "devDependencies": {
    "css-loader": "^1.0.0",
    "style-loader": "^0.23.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  },
  "scripts": {
    "webpack": "webpack"
  }

其次，就是准备 Webpack 的配置文件 webpack.config.js，当然，这个配置文件是一部分：

const { join } = require('path');

const config = {};

config.mode = 'production';
config.entry = {
  index: join(__dirname, './src/index.js')
};
config.output = {
  path: join(__dirname, './dist'),
  filename: '[name].bundle.js',
  chunkFilename: '[name].chunk.js',
  publicPath: join(__dirname, './dist/')
};

config.module = {
  rules: []
};

module.exports = config;

最后，就是准备一下需要的代码文件：

index.js：

import './css/common.css';
import './css/style1.css';
import './css/style2.css';

css/common.css：

* {
  margin: 0;
  padding: 0;
}

.my-div {
  width: 100%;
  height: 120px;
}

css/style1.css：

.my-div {
  background-color: aqua;
}

css/style2.css：

.my-div {
  font-size: 20px;
}

index.html：

<body>
  <script src="./dist/index.bundle.js"></script>
  <div class="my-div">这是一个div</div>
</body>

配置处理 CSS 的 loader

处理样式文件，一般会用到的 loader 有 css-loader 和 style-loader。

config.module.rules.push({
  test: /\.css$/,
  use: [{
    loader: 'style-loader'
  }, {
    loader: 'css-loader'
  }]
});

执行命令 yarn webpack 之后，在浏览器中查看 index.html，会发现在 head 标签中存在了三个 style 标签，style 标签中的样式分别对应 index.js 中导入的三个样式文件。

精简 style 标签的个数

在 head 标签中存在三个 style 标签，显然是不合理的，我最终想达到的效果就是把所有的样式都放在一个 style 标签中。这个时候就可以使用 style-loader 的参数来进行配置：

config.module.rules.push({
  test: /\.css$/,
  use: [{
    loader: 'style-loader',
    options: {
      singleton: true  // 在 head 标签中只存在一个 style 标签
    }
  }, {
    loader: 'css-loader'
  }]
});

再次执行命令 yarn webpack 之后，就会发现，达到了预期的效果。