在汇总中链接 PostCSS 和 SASS 的正确方法

Posted 2023-02-19

【中文标题】在汇总中链接 PostCSS 和 SASS 的正确方法

【英文标题】：Proper way to chain PostCSS and SASS in rollup

【发布时间】：2017-04-28 22:59:35

【问题描述】：

我正在尝试设置汇总以同时使用 SCSS 样式表和需要通过 PostCSS 解析的 Lost 网格系统。我已验证 SCSS 被正确解析，但 PostCSS 处理器似乎没有任何效果。

根据rollup-plugin-sass docs，我只需要将原版JS函数传递给processor选项。这可以正常工作，但生成的 CSS 也不例外。

这是我的汇总配置，使用 rollup -c config/dev.js 调用：

// Rollup plugins.
import babel from 'rollup-plugin-babel';
import cjs from 'rollup-plugin-commonjs';
import globals from 'rollup-plugin-node-globals';
import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';
import sass from 'rollup-plugin-sass';
import postcss from 'postcss';
const postcssProcessor = postcss([require('autoprefixer'), require('lost')]);

export default 
  dest: 'dist/app.js',
  entry: 'src/index.jsx',
  format: 'iife',
  plugins: [
    resolve(
      browser: false,
      main: true
    ),
    sass(
//      processor: postcssProcessor,
      output: 'dist/styles.css'
    ),
    babel(
      babelrc: false,
      exclude: 'node_modules/**',
      presets: [ 'es2015-rollup', 'stage-0', 'react' ],
      plugins: [ 'external-helpers' ]
    ),
    cjs(
      exclude: 'node_modules/process-es6/**',
      include: 'node_modules/**'
    ),
    globals(),
    replace( 'process.env.NODE_ENV': JSON.stringify('development') )
  ],
  sourceMap: true
;

取消注释processor 行无效。它应该将 lost-column 行转换为 calc 指令，并将供应商前缀添加到需要它们的 CSS 属性中。

这样做的正确方法是什么？

【参考方案1】：

这是我使用的工作配置：

import sass from 'rollup-plugin-sass'
import autoprefixer from 'autoprefixer'
import postcss from 'postcss'

sass(
    processor: css => postcss([autoprefixer])
        .process(css)
        .then(result => result.css)
)

【讨论】：

如何将选项传递给 postcss 插件？例如将浏览器 env 传递给 autoprefixer

请注明参考：npmjs.com/package/rollup-plugin-sass#processor

对于遇到autoprefixer 问题的任何人，您必须调用它：postcss( plugins: [ autoprefixer() ], )

【参考方案2】：

你也可以反过来处理它，使用 sass 作为 rollup-plugin-postcss 的预处理器：

import sass from 'node-sass'
import autoprefixer from 'autoprefixer'
import postcss from 'rollup-plugin-postcss'

export default 
  entry: 'src/app.js',
  dest: 'dist/bundle.js',
  format: 'iife',
  sourceMap: true,
  plugins: [
    postcss(
      preprocessor: (content, id) => new Promise((resolve, reject) => 
        const result = sass.renderSync( file: id )
        resolve( code: result.css.toString() )
      ),
      plugins: [
        autoprefixer
      ],
      sourceMap: true,
      extract: true,
      extensions: ['.sass','.css']
    )
  ]

【讨论】：

用这个版本的 rollup-plugin-postcss 编译 sass 不是一个好的选择，因为它使用的是 node-sass 而不是官方的 sass (dartsass)，而且它的 roo 速度很慢，并且使用 python 进行构建，很快就会被弃用

【参考方案3】：

查看rollup-plugin-styles 插件，它处理各种预处理器，包括 Sass（使用已弃用的 node-sass 和推荐的 sass），并且还具有内置的 PostCSS 支持。 这既解决了问题作者的问题，也解决了将参数传递给 autoprefixer 的问题 - 与使用 WebPack 时的方式相同：

import styles from 'rollup-plugin-styles';
import autoprefixer from 'autoprefixer';

export default 
  plugins: [ // rollup plugins
    styles (
      plugins: [autoprefixer(/* your options */)], // postcss plugins
    ),
  ],
;