gulp 如何 打包.module.scss

Question

gulp 如何 打包.module.scss。 我的项目是用create-react-app 建的。其中的一个模块我要打包成组件。所以站点我用webpack 来运行和部署。其中的组件，我想用gulp打包出来。js我已经搞定了。现在就是moudle.scss

Answer 1

经过3天的研究，终于搞定了。不要嘲笑我。。。

此处省略关于gulp的基本api的介绍....本篇写的比较简单，适合有自己研究的人看。

上代码。
解决方案就是先用上面那哥们说的gulp-sass，可以把sass转成css。
但是经过观察，此时生成的css，还是一个 css modules。
css modules 打包的核心其实在于生成一个class的映射关系。这里用了postcss，及其插件 postcss-modules
然后插件会给你生成一个json，这个json就是映射关系

var sass = require("gulp-sass");
var postcss = require('gulp-postcss');
var postcssmodules = require("postcss-modules");

function callback(file) {
    return {
      plugins: [
        postcssmodules({
          getJSON: function (cssFileName, json, outputFileName) {
          },
        })
      ],
    }
  }
  
gulp
    .src(["./src/**/*.{scss,sass}"])
    .pipe(sass())
    .pipe(postcss(callback))

在getJson方法中再用fs的方法输出成一个js或者其他格式的。只要能保证你的js中的className 能对应到你的map，得到带hash的className就好了

Answer 2

必要的依赖包你需要gulp-sass、node-sass；

const {
  series,
  src,
  dest
} = require('gulp')
const sass = require('gulp-sass')
const autoprefixer = require('gulp-autoprefixer')
const cleanCSS = require('gulp-clean-css')
const rename = require('gulp-rename')
sass.compiler = require('node-sass')


function sassMinify() {
  return src('src/css/**/*.scss') // 你scss文件路径
    .pipe(autoprefixer({ cascade: false }))
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(cleanCSS({ compatibility: 'ie10' }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest('public/stylesheets'))
}

exports.buildScss = series(sassMinify)