rollup打包部分css文件cssmodules|极客教程

rollup打包部分css文件cssmodules

在前端开发中，我们经常会使用一些CSS预处理器来帮助我们更好地管理样式文件。而在项目开发中，通常会将CSS样式文件拆分成多个模块，以便更好地组织和维护。在本文中，我们将介绍如何使用Rollup来打包部分CSS文件，并结合使用CSS Modules来管理样式文件。

什么是Rollup

Rollup 是一个 JavaScript 模块打包器，它与 Webpack 和 Browserify 一样，可用于构建 JavaScript 应用程序。不过，与其他打包工具不同的是，Rollup 遵循 ES6 模块标准，并且利用静态分析来最大限度地减小打包后的文件大小。因此，Rollup 被广泛应用于构建库、框架等项目。

什么是CSS Modules

CSS Modules 是一种用于管理 CSS 样式文件的解决方案。它允许我们将每个样式文件都视为一个独立的模块，避免了全局样式污染的问题。通过对类名进行自动哈希处理，确保了样式文件的唯一性，同时也提供了模块化的管理方式，更方便地引用和维护样式。

使用Rollup打包部分CSS文件

假设我们有一个项目需要使用Rollup打包，其中包含多个CSS样式文件。我们可以将样式文件拆分成多个模块，并使用CSS Modules来管理它们。在Rollup配置文件中，我们需要使用插件来处理CSS文件的导入和打包。

首先，我们需要安装所需的Rollup插件，可以使用以下命令进行安装：

npm install rollup rollup-plugin-css-only rollup-plugin-postcss postcss postcss-preset-env cssnano css-modules

接下来，我们创建一个demo项目，并在项目中新建以下文件：

/src/index.js：入口JavaScript文件
/src/styles：存放样式文件夹
/src/styles/main.css：主要样式文件
/src/styles/module1.css：样式模块1
/src/styles/module2.css：样式模块2
/rollup.config.js：Rollup配置文件

在主要样式文件main.css中，我们可以引入其他样式模块：

/* main.css */
@import "module1.css";
@import "module2.css";

body {
  background-color: #f0f0f0;
}

在模块样式文件module1.css和module2.css中，我们可以定义各自的样式规则：

/* module1.css */
.title1 {
  font-size: 24px;
  color: red;
}

/* module2.css */
.title2 {
  font-size: 20px;
  color: blue;
}

接下来，我们需要配置Rollup，编写rollup.config.js文件，内容如下：

import css from 'rollup-plugin-css-only';
import postcss from 'rollup-plugin-postcss';
import postcssPresetEnv from 'postcss-preset-env';
import cssnano from 'cssnano';
import cssModules from 'css-modules';
import path from 'path';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    postcss({
      extract: true,
      modules: true,
      plugins: [
        postcssPresetEnv(),
        cssnano()
      ],
      getJSON: function () {}
    }),
    css({ output: 'dist/bundle.css' })
  ]
};

在Rollup配置中，我们使用了rollup-plugin-css-only和rollup-plugin-postcss来处理CSS文件的导入和打包。同时，我们通过postcss插件应用了postcssPresetEnv和cssnano来进行样式处理，使用CSS Modules来管理样式模块。

最后，我们可以执行以下命令来进行打包：