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

Question

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

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

这是我的汇总配置，用 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

这是我使用的工作配置:

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