语言►nodejs►库►webpack

webpack中的style-loader

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/07/webpack%E4%B8%AD%E7%9A%84style-loader/

摘要

本文主要讲述了：

  1. 作用
  2. 示例

正文

作用

将 CSS 注入 DOM。

示例

learn_webpack/webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
        ],
      },
    ],
  },
};

learn_webpack/src/index.js

1
import resetCSS from './css/reset.css';

learn_webpack/src/css/reset.css

1
2
3
4
body {
  margin: 0;
  background-color: #f0f0f0;
}

运行：

1
2
3
#!/usr/bin/env bash

npm webpack

相当于

  1. 将 CSS 文件解析成 JavaScript 代码。
  2. 通过<style>，将 CSS 代码注入 DOM。

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/07/webpack%E4%B8%AD%E7%9A%84style-loader/

本文对你有帮助？请支持我

支付宝
微信