12月09, 2018

Browserify + scss

感谢我的同事又帮我创造了一篇文章。因为一些原因,老项目用了Browserify来构建项目,但是碰到一个问题是:怎么把import的scss文件,转为一个css文件?

也许有人会觉得用webpack重写一下,不就好了么。。可是有没有想过,有时候重写的成本会比较大?(当然其实在我看来,应该不会大)

在网上有一个库:scssify,但它并不能解决上面的问题。在issue中,也有人提问了:Is there a way to build a .css (for production)?

我个人的理解是,它这个比较适合开发的时候使用。

那么构建的时候用什么呢?我之前有想过,babel可以处理js,应该也可以处理css吧。搜索了一下,还真有:babel-plugin-css-modules-transform

照着API搞了一下,最终OK了。想吐个嘈:babel7的写法又变了一下,蛋疼。

/* eslint-disable */
const gulp = require('gulp');
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');

gulp.task('build-js', () => {
  return browserify()
  .add('./index.js')
  .transform(babelify, {
    presets: [
      require('@babel/preset-env'),  // 转换es6代码
      // require('@babel/preset-stage-0'),  // 指定转换es7代码的语法提案阶段
    ],
    plugins: [
      [
        "css-modules-transform", {
          "extensions": [".css", ".scss", ".less"],
          "extractCss": "./dist/combined.css",
          generateScopedName: (name, filepath, css) => {
            return name;
          },
          "preprocessCss": "./preprocessCss.js",
        }
      ]
    ]
  })  // 使用babel转换es6代码
  .bundle()  // 合并打包
  .pipe(source('bundle.js'))
  .pipe(buffer())
  .pipe(gulp.dest('./dist')); // 输出打包后的文件
});
// preprocessCss.js
const sass = require('node-sass');

module.exports = function processSass(data, filename) {
  const result = sass.renderSync({
    data,
    file: filename,
  }).css;
  return result.toString('utf8');
};

这里需要说明的有两点:

  • generateScopedName,因为我不需要将css名称模块块,所以需要原样输出
  • preprocessCss,用来处理scss中的@import

没有preprocessCss的话:

alt

另外有一点需要注意的是像base.scss,相同的多份,一般都是一些变量。如果是具体内容的话,那么结果就会有多份了。

OK,是不是没问题了?

不!!!我发现一个神坑的点:就是那个plugin没法压缩css,尝试了append这个参数,传入postcss-clean,但完全不行,css直接一行都没有了。

于是乎我用了一个多小时,看issue和文档,终于让我找到了这个:css-modulesify

我看到它的demo里面,after可以用post-css的插件做一些事情。

传入postcss-clean经过测试是可以,但是@import没法处理了。。在babel-plugin-css-modules-transform有一个参数:preprocessCss,但是在css-modulesify找不到。。

然后我尝试在before这个参数中传入postcss-scss,报错:

TypeError: plugin is not a function

在issue中也看到了类似的问题:support pre-proccessors like LESS or SASS

花了几个小时,结果都不行。看来只能放弃了。

有一个比较挫的方案,就是在运行完build-js这个gulp任务,再跑一个任务,专门去压缩css文件。

所以目前打包最好的方案,还是用webpack吧!!

本文链接:www.my-fe.pub/post/browserify-and-scss.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。