Un bon moyen d'enchaîner PostCSS et SASS en rollup

Question

J'essaie de configurer le rollup pour utiliser à la fois les feuilles de style SCSS et le système de grille Lost, qui doit être analysé via PostCSS. J'ai vérifié que le SCSS est correctement analysé, mais le processeur PostCSS ne semble pas avoir d'effet.

Selon le rollup-plugin-sass docs, j'ai juste besoin de passer dans la fonction JS vanilla à l'option processor. Cela fonctionne sans erreur, mais le CSS généré n'est pas différent.

Voici ma config Rollup, appelé avec 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 
}; 

la ligne processor Enlever les commentaires n'a pas d'effet. Il doit convertir les lignes lost-column en directives calc et ajouter des préfixes de fournisseur aux propriétés CSS qui en ont besoin.

Quelle est la bonne façon de procéder?

Answer 1

C'est une configuration de travail que j'utilise:

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

Vous pouvez aborder aussi l'inverse, en utilisant SASS comme pré-processeur pour 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'] 
    }) 
    ] 
}