如何使用汇总插件 node-sass 缩小 CSS答案

【问题标题】：How to minify css using rollup plugin node-sass如何使用汇总插件 node-sass 缩小 CSS
【发布时间】：2020-02-19 16:12:23
【问题描述】：

我知道 node-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 的过程中我是分开的。但是我怎样才能使那个工件被缩小呢？

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

【问题讨论】：

标签： sass rollup node-sass rollupjs

【解决方案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文件。

【讨论】：