如何使用汇总插件节点sass缩小css

Question

我知道节点sass默认情况下可以缩小css。但是，对于像我这样创建js和单独css工件的管道，有什么选择呢？

const resolve = require('rollup-plugin-node-resolve');
const babel = require('rollup-plugin-babel');
const replace = require('rollup-plugin-replace'); // use to setup project enviroment variables
const sass = require('rollup-plugin-sass');
const json = require('rollup-plugin-json');
const image = require('rollup-plugin-image');
const reactSvg = require('rollup-plugin-react-svg');
const fs = require('fs');
const babelOptions = JSON.parse(fs.readFileSync('.babelrc'));
const js = {
input: 'src/index.js',
output: {
file: 'lib/index.js',
format: 'es',
},
plugins: [
json(),
reactSvg(),
image(),
sass({
output: 'lib/styles.css',
}),
babel({
...babelOptions,
babelrc: false,
exclude: ['node_modules/**'],
runtimeHelpers: true,
comments: false,
}),
resolve({
jsnext: true,
module: true,
}),
],
};
export default [js];

正如您所看到的，我只有一个index.js文件作为输入和输出，但在输出css的过程中，我将分别输出css。但是我怎样才能缩小那个工件呢？

或者你认为这种方法有什么缺陷吗？

Answer 1

您实际上可以使用rollup-plugin-scss插件

import scss from 'rollup-plugin-scss';

并将选项设置为使用outputStyle: "compressed"缩小

// rollup.config.js
export default {
//...,
plugins: [
//...,
scss({
output: 'lib/styles.css',
outputStyle: "compressed",
}),
//...,
],
//...,
}

以输出缩小的.css文件。