Estoy tratando de configurar el rollup para usar tanto las hojas de estilo SCSS como el sistema de cuadrícula Lost, que debe analizarse mediante PostCSS. He verificado que el SCSS se está analizando correctamente, pero el procesador PostCSS no parece tener ningún efecto.

De acuerdo con los rollup-plugin-sass docs, solo necesito pasar el JS vainilla función a la opción processor. Esto funciona sin errores, pero el CSS generado no es diferente.

Aquí está mi configuración acumulada, llamada con 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
};

Dejar de comentar la línea processor no tiene ningún efecto. Debería convertir las líneas lost-column en directivas calc y agregar prefijos de proveedor a las propiedades CSS que los requieran.

¿Cuál es la manera correcta de hacer esto?

12
bright-star 13 dic. 2016 a las 22:00

2 respuestas

La mejor respuesta

Esta es una configuración de trabajo que uso:

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)
})
8
nathancahill 28 ene. 2017 a las 00:20

También puede abordarlo al revés, utilizando sass como preprocesador para 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']
    })
  ]
}
16
coussej 9 ago. 2017 a las 14:30