gulp 如何 打包.module.scss

小哈
  • 214

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

回复
阅读 633
2 个回答
✓ 已被采纳

经过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就好了

必要的依赖包你需要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)
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏