跳到主要内容

eslint 与 scss

· 阅读需 6 分钟
泥豆君
泥豆君
哇！是泥豆侠，我们没救了

嗯，在之前使用 rollup 中，我以为自己配置好了关于 scss 的配置，现在发现并没有。

一、正确的 scss 配置​

使用 node-sass 或 sass 包处理 scss 后缀文件的编译，而负责链接 sass 和 rollup 的是 rollup-plugin-postcss 或 rollup-plugin-styles。但是 rollup-plugin-styles 的下载量远远低于 rollup-plugin-postcss （尽然，单纯的下载量说明不了什么问题）。

好了，现在以 rollup-plugin-postcss 为例。

1. 引入 npm 包​

# 安装主要依赖
npm install --save-dev rollup rollup-plugin-postcss \
     autoprefixer cssnano
# 安装 scss 支持
npm install --save-dev node-sass # 或 sass

2. 配置​

rollup.config.js
import
import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';


export default {
    // ... 其他配置
    plugin: [
        // ... 其他插件
    postcss({
      // 关键配配置：提取独立 CSS 文件
      // extract: true, // 移除该项则默认内联
      extract: 'component.css', // 移除该项则默认内联
      // 支持 .scss 编译
      extensions: ['.css', '.scss'],
      // 开启 CSS 源码映射
      sourceMap: true,
      // 生产环境：压缩 CSS + 自动补全前缀
      plugins: [
        autoprefixer({
          overrideBrowserslist: ['> 1%', 'last 2 versions'], // 浏览器兼容
        }),
        cssnano(), // 压缩 CSS （取出空格、合并规则）
      ],
      modules: {
        generateScopedName: '[name]__[local]', // CSS Modules 命名规则
        // 如果你的类型中有用下划线连字符的，建议关闭下面的配置，因为它会转化为驼峰而导致下划线丢失
        // localsConvention: 'camelCaseOnly', // 导出的类名格式
      },
      // 可选：自定义 scss 编译选项
      scss: {
        loadPaths: ['node_modules'],
        quietDeps: true,
        verbose: true,
      },
    }),
        // ... 其他插件
    ]
    // ... 其他配置
}

3. 使用​

需要显式的使用 ~ 标识启用者来自于 "node_modules" 才可以。

// 即便是 `enr` 包导出为 "enr/common.scss" ，也必须使用完整路径 "enr/styles/common.scss"
import '~enr/styles/common.scss';

二、其他包​

1. 模块解析​

使用包 @rollup/plugin-node-resolve 解析 node_modules 路径（含 .ts/.scss 文件）

2. 资源预处理​

使用包 @rollup/plugin-url 处理 JS 中的图片/字体资源（替代为 data URL ），需要在 babel/commonjs 前导入语句避免被修改

3. Typescript​

官方推荐使用 @rollup/plugin-typescript ，但是该包在 pnpm 的 workspace 子包使用中无法找到子包自身的 "tsconfig.json" 文件。可能是我配置的问题，但是目前使用 rollup-plugin-typescript2 代替，必须放在 commonjs/babel 之前。

信息

报错如下：

@rollup/plugin-typescript: Path of Typescript
    compiler option 'outDir' must be located
    inside Rollup 'dir' option.

其实在 "tsconfig.json" 文件配置 compilerOptions.outDir 值，且改值为 rollup 打包出口之下即可。可能是我之前没有配置该值的习惯。所以才导致以为插件有问题。

4. JSON​

使用包 @rollup/plugin-json 将 JSON 转化为 ES 模块，需放在 commonjs 之前，避免被误处理。

5. CommonJS 依赖​

使用包 [@rollup/plugin-commonjs] 处理 node_modules 中的 CommonJS 依赖。

6. babel​

使用包 @rollup/plugin-babel 进行 JS 语法的转义/polyfill （处理所有的 JS 代码，包含 TS 转义结果）。

7. scss​

使用 rollup-plugin-postcss 处理 .css/.scss 文件，放在 babel 后面更安全

8. 简单配置​

rollup.config.js
import { preserveDirective } from '@qqi/rollup-preserve-directive';
import resolve from '@rollup/plugin-node-resolve';
import url from '@rollup/plugin-url';
import typescript from '@rollup/plugin-typescript';
import json from '@rollup/plugin-json';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';
import copy from 'rollup-plugin-copy';

export default {
  // ... 其他配置
  plugins: [
    preserveDirective(), // 保留 'use client'; 指令
    resolve({
      extensions: ['.js', '.ts', '.jsx', '.tsx', '.scss', '.css'],
    }),
    url({
      // 将小于 8 kb 的文件内联为 base64 编码
      limit: 8 * 1024, // 8 kb
      include: ['**/*.png'], // 只处理 png 文件
      emitFiles: true, // 发出文件而不是将其转化为 base6
      fileName: '[name][hash].[ext]', // 输出的格式
    }),
    typescript({
      tsconfig: './tsconfig.json',
    }),
    json(),
    commonjs(), // 处理 CommonJs 模块转化为 ES 模块
    babel({
      extends: ['.js', '.jsx', '.ts', '.tsx'],
      babelHelpers: 'runtime', // 关键： 使用 @babel/runtime
      include: ['src/**/*'], // 确保包含所有的源文件
      exclude: 'node_modules/**',
      skipPreflightCheck: true,
      presets: [
        ['@babel/preset-env', { modules: false }],
        '@babel/preset-react',
        '@babel/preset-typescript',
      ],
    }),
    postcss({
      // 关键配配置：提取独立 CSS 文件
      // extract: true, // 移除该项则默认内联
      extract: 'component.css', // 移除该项则默认内联
      // 支持 .scss 编译
      extensions: ['.css', '.scss'],
      // 开启 CSS 源码映射
      sourceMap: true,
      // 生产环境：压缩 CSS + 自动补全前缀
      plugins: [
        autoprefixer({
          overrideBrowserslist: ['> 1%', 'last 2 versions'], // 浏览器兼容
        }),
        cssnano(), // 压缩 CSS （取出空格、合并规则）
      ],
      modules: {
        generateScopedName: '[name]__[local]', // CSS Modules 命名规则
        localsConvention: 'camelCaseOnly', // 导出的类名格式
      },
      // 可选：自定义 scss 编译选项
      scss: {
        loadPaths: ['node_modules'],
        quietDeps: true,
        verbose: true,
      },
    }),
    copy({ targets: [{ src: 'src/css/**', dest: 'dist/' }] }),
  ],
  // ... 其他配置
};

三、实用包​