Question

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

根据rollup-plugin-sass docs，我只需要将vanilla 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属性中。

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

Answer 1

你也可以通过使用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']
    })
  ]
}

Answer 2

这是我使用的工作配置：

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)
})

Answer 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
    }),
  ],
};

Answer 4

对于遇到 autoprefixer 问题的任何人，您必须调用它。

...,
postcss(
  plugins: [
    autoprefixer()
  ],
)
...

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

4 个答案: