Правильный способ связывания PostCSS и SASS в сворачивании

Question

Я пытаюсь настроить rollup для использования таблиц стилей SCSS и системы Lost grid, которая должна анализироваться через PostCSS. Я проверил, что 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, которые их требуют.

Каков правильный способ сделать это?

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

Answer 2

Вы также мог бы подойти к нему наоборот, используя дерзость в качестве предварительной обработки для 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'] 
    }) 
    ] 
}