css-loader

CSS加载器。(CSS Loader)

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-loaderurl-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