如何在 Webpack 和 Babel 中使用 CSS 和 Less？

前言

随着 Web 技术的不断发展，前端工程化已经成为了日常开发的必备技能。而 Webpack 和 Babel 作为目前流行的前端打包工具和编译器，也成为了每个前端开发人员必须掌握的技能之一。本篇文章将介绍如何在 Webpack 和 Babel 中使用 CSS 和 Less 以及一些实践经验。

使用 CSS

Webpack 配置

使用 Webpack 打包 CSS 的第一步就是将 CSS 文件引入到 JavaScript 代码中。Webpack 提供了一个 CSS loader，使用这个 loader 我们可以将所有的 CSS 文件打包成一个 bundle 文件。具体配置如下：

// javascriptcn.com 代码示例
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

其中 style-loader 负责将 CSS 样式应用到页面上，css-loader 负责解析 CSS 文件。

示例代码

import './style.css';

// js code

/* style.css */

body {
  background-color: #fff;
  color: #333;
}

使用 Less

Webpack 配置

如果想使用 Less 替代 CSS，需要安装 less-loader 和 less：

npm install less-loader less --save-dev

配置 Webpack 如下：

// javascriptcn.com 代码示例
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
    ],
  },
};

其中 less-loader 用于将 Less 文件编译成 CSS 文件。

示例代码

import './style.less';

// js code

/* style.less */

@color: #fff;

body {
  background-color: @color;
  color: #333;
}

集成 Babel

在使用 Webpack 打包 CSS 或者 Less 的同时，我们经常会使用 Babel 来解析 ES6 或者 JSX 语法。在这种情况下，我们可以将 css-loader 和 less-loader 与 babel-loader 集成在一个 module.rules 对象中。这样就能在编译 ES6 或者 JSX 语法的同时把 Less 和 CSS 文件一起处理了。

// javascriptcn.com 代码示例
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
    ],
  },
};

总结

本文详细介绍了如何在 Webpack 和 Babel 中使用 CSS 和 Less，以及如何将 css-loader，less-loader 和 babel-loader 整合在一起。希望本文能够让读者更好地掌握 Webpack 和 Babel 在前端工程化中的应用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65433ea27d4982a6ebce5322