PostCSS で解析する必要がある SCSS スタイルシートと Lost グリッド システムの両方を使用するようにロールアップをセットアップしようとしています。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 プロパティにベンダー プレフィックスを追加する必要があります。
これを行う正しい方法は何ですか?