rollup-plugin-postcss配合SCSS与CSS Modules不生效问题求助

错误原因 #

1. 第一个CssSyntaxError是PostCSS默认使用标准CSS解析器，无法识别SCSS语法特有的//单行注释
2. 第二个TypeError: node.getIterator is not a function是两个问题导致的：
   • 配置时直接给parser传了字符串"postcss-scss"，没有传入引入后的postcss-scss实例
   • PostCSS与postcss-scss版本不兼容

修复步骤 #

1. 安装匹配版本的依赖
   执行以下命令安装postcss-scss：

npm install postcss-scss@latest --save-dev

注：确保当前项目PostCSS版本为8.x，对应postcss-scss 10.x及以上版本，rollup-plugin-postcss版本为4.x及以上即可兼容

2. 修改rollup.config.js配置
   首先在文件顶部引入postcss-scss：

import postcssScss from 'postcss-scss';

然后修改postcss插件配置，将parser字段改为传入引入的postcssScss实例：

postcss({
    parser: postcssScss, // 替换原来的字符串形式配置
    plugins: [autoprefixer(), postcssNormalize()],
    namedExports: true,
    sourceMap: true,
    extract: false,
    autoModules: true,
    minimize: true,
    extensions: [".scss"],
    use: ["sass"],
}),

3. 可选异常排查
   如果修改后仍有报错，可先注释掉postcssNormalize()插件再测试，部分旧版本的postcss-normalize对postcss-scss解析的AST兼容度不足。

修改完成后重新执行rollup -c即可正常识别SCSS的//单行注释，无需修改现有SCSS文件的注释格式。

内容的提问来源于stack exchange，提问作者S'unya Dickman