使用 Webpack CSS Loader 加载器-技术鸭(jishuya.cn)

Webpack 的 CSS Loader 处理捆绑 CSS 资源。使用 css-loader npm 模块，您可以在 JavaScript 中将 CSS 作为纯字符串导入。例如给定以下 app.js 文件：

const css = require(./style.css).toString();
console.log(css);

而下面 style.css 文件：

h1 { color: green; }

下面的 Webpack 配置将编译 app.js 成一个打印的包 h1 { color: green; } 当它在 Node.js 或浏览器中运行时。

module.exports = {
  entry: `${__dirname}/example/app.js`,
  module: {
    rules: [
      {
        test: /\\.css$/,
        use: css-loader,
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [.css, .js]
  },
  output: {
    filename: main.js,
    path: `${__dirname}/example/dist`
  }
};

为什么 CSS 加载器很重要

能够将 CSS 加载为字符串是很简洁的，但它本身通常没有用处。这就是为什么 CSS 加载器通常与其他加载器一起使用的原因，比如 style-loader 。默认情况下，样式加载器插入一个 <style> 标记到页面的 <head> 对于每个导入的 CSS 文件。所以鉴于以下 app.js 文件：

require(./style.css);

document.querySelector(body).innerHTML = <h1>Hello, World</h1>;

而下面 webpack.config.js：

const webpack = require(webpack);

const config = {
  entry: `${__dirname}/example/app.js`,
  module: {
    rules: [
      {
        test: /\\.css$/,
        use: [style-loader, css-loader],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [.css, .js]
  },
  output: {
    filename: main.js,
    path: `${__dirname}/example/dist`
  }
};

你会得到一个绿色的 Hello, World，没有 <style> 标签。

对于大多数应用程序来说，使用 CSS 加载器导入样式是多余的，您通常不应该使用它。 CSS loader 经常被用来获取 scoped 样式，但是 Vue 已经支持 scoped CSS 。因此如果您需要范围样式但不能使用 Vue 的单文件组件。

文章版权归作者所有，未经允许请勿转载。

THE END