RsPack Css
一、认识
在现代前端开发中，样式文件（CSS、SASS、LESS 等）的处理往往是构建工具配置的重中之重。不同的工具链有着不同的处理方式，而 RsPack 作为一个快速构建工具，在样式文件的处理上也提供了多种灵活的配置选项。本文将为你详细讲解如何在 RsPack 中配置样式文件，介绍相关的 loader、依赖以及如何组织配置。
首先，让我们了解一下常见的 loader，它们是如何在 RsPack 中协同工作，处理不同类型的样式文件的。
一、style-loader 和 CssExtractRspackPlugin.loader
-
style-loader: 用于将CSS注入到HTML文件的<style>标签中。它通常用于开发环境，以便快速加载样式并进行热重载（Hot Module Replacement）。 -
CssExtractRspackPlugin.loader则是在生产环境中使用的，它的作用是将样式从JavaScript文件中提取出来，打包成单独的CSS文件，以优化性能。这对于生产环境下的资源加载和缓存非常重要。
二、css-loader: css-loader 的作用是将 CSS 文件中的样式内容转换成 JavaScript 模块，最终通过 JavaScript 加载样式。它允许你解析 CSS 中的 @import 和 url()，并且支持 CSS Modules（局部作用域 CSS），使得样式只在特定组件中生效，避免全局污染。通过设置 modules: true，css-loader 将 CSS 文件处理为 CSS Modules。默认情况下，类名会经过哈希处理，确保其唯一性。
三、postcss-loader: 允许你使用 PostCSS 插件来处理 CSS。最常见的插件是 autoprefixer，它能够自动为 CSS 添加浏览器前缀，确保兼容性，避免手动处理浏览器差异。
四、sass-loader: sass-loader 用于将 SCSS 或 SASS 语法的样式文件编译成 CSS 文件。它是处理 SASS 文件的必备工具，可以让你使用 SASS 的功能，如变量、嵌套规则和 mixins。
五、less-loader: less-loader 类似于 sass-loader，它用于将 LESS 文 件编译为标准的 CSS 文件。LESS 是一种 CSS 预处理器，提供了变量、嵌套等功能，和 SASS 类似，但语法略有不同。
二、准备
安装构建依赖
pnpm add @rspack/cli @rspack/core -D
安装样式依赖
pnpm add style-loader css-loader postcss-loader autoprefixer sass sass-loader less less-loader -D
三、配置
3.1 package.json
"scripts": {
"dev": "rspack dev",
"build": "rspack build"
}
3.2 rspack.config.js
const Path = require("path");
const rspack = require("@rspack/core");
const devMode = process.env.NODE_ENV !== "production";
const cssLoader = (modules = false) => {
return [
devMode ? "style-loader" : rspack.CssExtractRspackPlugin.loader,
{
loader: "css-loader",
options: {
modules: modules
? {
namedExport: false,
}
: false,
},
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["autoprefixer"],
},
},
},
];
};
const sassLoader = (modules = false) => [...cssLoader(modules), "sass-loader"];
const lessLoader = (modules = false) => [...cssLoader(modules), "less-loader"];
const cssRules = [
{
test: /\.css$/,
exclude: /\.module\.css$/,
use: cssLoader(),
},
{
type: "javascript/auto",
test: /\.module\.css$/,
use: cssLoader(true),
},
];
const sassRules = [
{
test: /\.(sa|sc)ss$/,
exclude: /\.module\.(sa|sc)ss$/,
use: sassLoader(),
},
{
type: "javascript/auto",
test: /\.module\.(sa|sc)ss$/,
use: sassLoader(true),
},
];
const lessRules = [
{
test: /\.less$/,
exclude: /\.module\.less$/,
use: lessLoader(),
},
{
type: "javascript/auto",
test: /\.module\.less$/,
use: lessLoader(true),
},
];
/** @type {import('@rspack/cli').Configuration} */
const config = {
entry: {
main: "./src/index.tsx",
},
output: {
path: Path.resolve(__dirname, "dist"),
},
experiments: {
css: false,
},
resolve: {
extensions: ["...", ".jsx", ".tsx", ".ts"],
},
module: {
rules: [
...cssRules,
...sassRules,
...lessRules,
],
},
plugins: [
...(devMode ? [] : [new rspack.CssExtractRspackPlugin()]),
],
};
module.exports = config;
3.3 declarations.d.ts
declare module "*.css" {
const content: { [className: string]: string };
export default content;
}
declare module "*.module.css" {
const content: { [className: string]: string };
export default content;
}
declare module "*.scss" {
const content: { [className: string]: string };
export default content;
}
declare module "*.module.scss" {
const content: { [className: string]: string };
export default content;
}
declare module "*.less" {
const content: { [className: string]: string };
export default content;
}
declare module "*.module.less" {
const content: { [className: string]: string };
export default content;
}