如何使用 rollup-plugin-scss 插件？

推荐答案

// www.javascriptcn.com code example
// rollup.config.js
import scss from 'rollup-plugin-scss';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    scss({
      output: 'dist/bundle.css',
      failOnError: true,
      outputStyle: 'compressed'
    })
  ]
};

本题详细解读

1. 安装 rollup-plugin-scss

首先，你需要安装 rollup-plugin-scss 插件。可以通过 npm 或 yarn 进行安装：

npm install rollup-plugin-scss --save-dev

或者

yarn add rollup-plugin-scss --dev

2. 配置 Rollup

在 Rollup 配置文件中引入 rollup-plugin-scss 插件，并将其添加到 plugins 数组中。你可以通过配置选项来控制 SCSS 文件的输出路径、压缩方式等。

3. 配置选项说明

• output: 指定生成的 CSS 文件的输出路径和文件名。例如，output: 'dist/bundle.css' 会将生成的 CSS 文件输出到 dist 目录下，并命名为 bundle.css。

• failOnError: 设置为 true 时，如果 SCSS 编译过程中出现错误，Rollup 构建会失败。默认为 false。

• outputStyle: 控制生成的 CSS 文件的压缩方式。例如，outputStyle: 'compressed' 会生成压缩后的 CSS 文件。其他可选值包括 expanded、nested 和 compact。

4. 使用示例

假设你的项目结构如下：

src/
  main.js
  styles.scss

在 main.js 中引入 SCSS 文件：

import './styles.scss';

运行 Rollup 构建后，dist 目录下会生成 bundle.js 和 bundle.css 两个文件。

5. 其他注意事项

• 如果你需要在 SCSS 文件中使用 @import 导入其他 SCSS 文件，确保路径正确。
• 如果你需要处理 CSS 中的图片或字体等资源，可以结合 rollup-plugin-url 或 rollup-plugin-copy 插件使用。