0

css-loader

CSS加载器。（CSS Loader）

Github 资源库
主要指标

Github星跟踪图

css-loader

css-loader 对 @import 和 url() 的解释就像 import/require() 一样，并会对它们进行解析。

开始使用

首先，你需要安装 css-loader。 

npm install --save-dev css-loader

然后将该插件添加到你的 webpack 配置中。例如

file.js 

import css from 'file.css';

webpack.config.js 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

用于要求你的资产的好的加载器是 file-loader 和 url-loader，你应该在你的配置中指定（见下文）。

然后通过你喜欢的方法运行webpack。

toString

你也可以直接将 css-loader 的结果作为字符串使用，比如在 Angular 的组件样式中。

webpack.config.js 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['to-string-loader', 'css-loader'],
      },
    ],
  },
};

或者 

const css = require('./test.css').toString();
console.log(css); // {String}

如果有 SourceMaps，它们也会被包含在结果字符串中。

如果出于某种原因，你需要将 CSS 提取为一个纯字符串资源（即没有包裹在 JS 模块中），你可能会想要查看 extract-loader。例如，当你需要将 CSS 作为字符串进行后期处理时，它就很有用。

webpack.config.js 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'handlebars-loader', // handlebars loader expects raw resource string
          'extract-loader',
          'css-loader',
        ],
      },
    ],
  },
};

选项

（恕删略）

许可证

MIT


（The first version translated by vz on 2020.08.29）

主要指标

概览
名称与所有者webpack-contrib/css-loader
主编程语言JavaScript
编程语言JavaScript (语言数: 1)
平台Web browsers
许可证MIT License
所有者活动
创建于2012-04-07 01:04:57
推送于2025-06-20 14:28:09
最后一次提交2025-06-20 19:58:09
发布数123
最新版本名称v7.1.2 (发布于 )
第一版名称v0.10.0 (发布于 2015-04-09 23:05:17)
用户参与
星数4.3k
关注者数57
派生数609
提交数864
已启用问题?
问题数892
打开的问题数15
拉请求数580
打开的拉请求数4
关闭的拉请求数155
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?

[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![tests][tests]][tests-url]
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url]
[![size][size]][size-url]

css-loader

The css-loader interprets @import and url() like import/require() and will resolve them.

Getting Started

To begin, you'll need to install css-loader:

npm install --save-dev css-loader

Then add the plugin to your webpack config. For example:

file.js

import css from 'file.css';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

Good loaders for requiring your assets are the file-loader and the url-loader which you should specify in your config (see below).

And run webpack via your preferred method.

toString

You can also use the css-loader results directly as a string, such as in Angular's component style.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['to-string-loader', 'css-loader'],
      },
    ],
  },
};

or

const css = require('./test.css').toString();

console.log(css); // {String}

If there are SourceMaps, they will also be included in the result string.

If, for one reason or another, you need to extract CSS as a
plain string resource (i.e. not wrapped in a JS module) you
might want to check out the extract-loader.
It's useful when you, for instance, need to post process the CSS as a string.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'handlebars-loader', // handlebars loader expects raw resource string
          'extract-loader',
          'css-loader',
        ],
      },
    ],
  },
};

Options