3.2 scss编译

前言

本篇主要讲述在rollup.js编译过程中，怎么处理*.scss文件配置和编译。

实现例子

• 编译 scss 文件

demo例子

https://github.com/chenshenhai/rollupjs-note/blob/master/demo/chapter-03-02/

npm i

## 开发模式
npm run dev

## 生产模式
npm run build

实现步骤

步骤1: 目录和准备

.
├── build ## 编译脚本
│   ├── rollup.config.dev.js
│   ├── rollup.config.js
│   └── rollup.config.prod.js
├── dist ## 编译结果
│   ├── index.css
│   ├── index.js
│   └── index.js.map
├── example  ## 例子
│   └── index.html
├── package.json
└── src ## 编译源文件目录
    ├── css
    │   ├── index.scss
    │   └── lib
    │       └── init.scss
    └── index.js

安装对应编译的npm模块

## 安装 rollup.js 基础模块
npm i --save-dev rollup 

## 安装 rollup.js css编译插件模块
npm i --save-dev rollup-plugin-postcss 

## 安装 rollup.js 编译本地开发服务插件
npm i --save-dev rollup-plugin-serve

## 安装 rollup.js 编译代码混淆插件
npm i --save-dev rollup-plugin-uglify

## 安装 rollup.js 编译ES6+的 babel 模块
npm i --save-dev @rollup/plugin-babel @babel/core @babel/preset-env

## 安装 css 编译解析插件
npm i --save-dev rollup-plugin-postcss
## 安装 scss 编译插件
npm i --save-dev node-sass

步骤2: rollup配置

• 编译基本配置 ./build/rollup.config.js

const path = require('path');
const { babel } = require('@rollup/plugin-babel');
const postcss = require('rollup-plugin-postcss');
const sass = require('node-sass');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

const isProductionEnv = process.env.NODE_ENV === 'production'

const babelOptions = {
  "presets": ['@babel/preset-env'],
}

const processSass = function(context, payload) {
  return new Promise(( resolve, reject ) => {
    sass.render({
      file: context
    }, function(err, result) {
      if( !err ) {
        resolve(result);
      } else {
        reject(err)
      }
    });
  })
}

module.exports = [
  {
    input: resolveFile('src/index.js'),
    output: {
      file: resolveFile('dist/index.js'),
      format: 'umd',
    }, 
    plugins: [
      postcss({
        extract: true,
        minimize: isProductionEnv,
        extensions:['css', 'scss'],
        process: processSass,
      }),
      babel(babelOptions),
    ],
  },
]

• 开发模式配置基本 ./build/rollup.config.dev.js

process.env.NODE_ENV = 'development';

const path = require('path');
const serve = require('rollup-plugin-serve');
const configList = require('./rollup.config');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}
const PORT = 3000;

const devSite = `http://127.0.0.1:${PORT}`;
const devPath = path.join('example', 'index.html');
const devUrl = `${devSite}/${devPath}`;

setTimeout(()=>{
  console.log(`[dev]: ${devUrl}`)
}, 1000);

configList.map((config, index) => {

  config.output.sourcemap = true;

  if( index === 0 ) {
    config.plugins = [
      ...config.plugins,
      ...[
        serve({
          port: PORT,
          contentBase: [resolveFile('')]
        })
      ]
    ]
  }

  return config;
})


module.exports = configList;

• 生产模式配置基本 ./build/rollup.config.prod.js

process.env.NODE_ENV = 'production';

const { uglify } = require('rollup-plugin-uglify');
const configList = require('./rollup.config');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

configList.map((config, index) => {

  config.output.sourcemap = false;
  config.plugins = [
    ...config.plugins,
    ...[
      uglify()
    ]
  ]

  return config;
})

module.exports = configList;

• 在./package.json配置编译执行脚本

  {
  "scripts": {
    "build": "node_modules/.bin/rollup -c ./build/rollup.config.prod.js",
    "dev": "node_modules/.bin/rollup -w -c ./build/rollup.config.dev.js"
  },
  }
  

步骤3: 待编译源码

• js源码 ./src/index.js

import './css/index.scss';

const arr1 = [1,2,3];
const arr2 = [4,5,6];
console.log([...arr1, ...arr2]);

• scss源码 ./src/css/index.scss

@import './lib/init.scss';

$BG_COLOR: #e0e0e0;
body {
  background: $BG_COLOR;
}

• scss源码 ./src/css/lib/init.scss

html {
  body {
    margin: 0;
    padding: 0;
    border: none;
  }
}

步骤4: 编译结果

• 在项目目录下执行 开发模式 npm run dev
• 编译结果在目录 ./dist/index.css 下
• scss 编译结果为

html body {
  margin: 0;
  padding: 0;
  border: none; }

body {
  background: #e0e0e0; }

步骤5: 浏览器查看结果

• example目录./example/index.html
• example源码

html

• 访问 http://127.0.0.1:3000/example/index.html
• 打开工作台console 就会显示可运行结果

后记

主要讲述在rollup.js编译过程中，怎么处理*.scss文件配置和编译。下一篇文件则讲述，怎么处理*.less文件配置和编译。