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 的单文件组件

© 版权声明
评论 抢沙发

请登录后发表评论