12

PostCSS で解析する必要がある SCSS スタイルシートと Lost グリッド システムの両方を使用するようにロールアップをセットアップしようとしています。SCSS が正しく解析されていることを確認しましたが、PostCSS プロセッサは効果がないようです。

rollup-plugin-sassdocsによると、バニラ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 プロパティにベンダー プレフィックスを追加する必要があります。

これを行う正しい方法は何ですか?

4

3 に答える 3