css loader

作者：酷帥男爵发布日期:2026-07-12 浏览:71

// CSS Loader 示例代码

// webpack.config.js 配置
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader', // 将 JS 字符串生成为 style 节点插入到 head 中
          'css-loader'    // 解析 @import 和 url() 并将它们转换为模块依赖关系
        ]
      }
    ]
  }
};

// 在你的 JavaScript 文件中引入 CSS 文件
import './styles.css';

解释说明：

webpack.config.js:
- test: /\.css$/: 匹配所有以 .css 结尾的文件。
- use: ['style-loader', 'css-loader']:
  - style-loader: 将 CSS 注入到 HTML 的 <head> 标签中。
  - css-loader: 解析 CSS 文件中的 @import 和 url() 语句，并将它们转换为模块依赖关系。
在 JavaScript 文件中引入 CSS:
- 使用 import './styles.css'; 可以将 CSS 文件打包并应用到页面上。

上一篇：css column

下一篇：css基本语法