如何在发布前构建 chrome 扩展 css 文件？

Question

我构建了一个简单的 chrome 扩展并想发布它。

问题是，我不知道如何处理某些 css 个文件。

我使用 browserify 和 yarn 安装了 bulma。

在我的 main.js 中，我得到以下行：

import Styles from './styles.css'

styles.css 的第一行如下所示：

@import '../node_modules/bulma/css/bulma.css';

这是我在 package.json

中的 build 命令

cross-env NODE_ENV=production browserify -g envify -t cssify src/main.js  | uglifyjs -c warnings=false -m > dist/build.js

和我的 index.html (popup.html)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app"></div>
    <script src="dist/build.js"></script>
  </body>
</html>

如果我在本地构建它，它工作正常。但是生成的唯一文件是 src/build.js。如果我删除 node_modules 文件夹，弹出窗口显然不好看。

Answer 1

您要么切换到 sass 并使用类似 Gulp 的东西和 sass 一起用于 Bulma，然后将您的 sass 文件与您的 node_modules 一起编译。下面的脚本使用 gulp-sass 编译 sass/scss 样式文件。

或者，因为 bulma 似乎使用 css-loader（还没有查过）你可以使用 extract-loader 从你的包中提取 css 和 html文件。

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();
var sass = require('gulp-sass');

// Set your build paths here
var sassPaths = [
  'node_modules/some-library/scss/', // node modules
  'scss/' // your style files
];

gulp.task('sass', function() {
  return gulp.src('scss/app.scss') // where you've imported all your own style files
    .pipe($.sass({
      includePaths: sassPaths,
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(sass())
    .pipe(gulp.dest('/css'));
});

然后在您的 package.json 中您可以设置构建脚本，例如"buildcss": "gulp sass",

Answer 2

最后做了以下事情：

yarn add browserify-css --dev

https://github.com/cheton/browserify-css

然后将以下内容添加到构建命令

-t [ browserify-css --minify=true --output dist/bundle.css]

完整命令：

cross-env NODE_ENV=production browserify -g envify src/main.js -t [ browserify-css --minify=true --output dist/bundle.css ] | uglifyjs -c warnings=false -m > dist/build.js

然后用

更新索引。html/popup.html

<link rel="stylesheet" href="dist/bundle.css">

如何在发布前构建 chrome 扩展 css 文件？

How to build chrome extension css files before publishing?

google-chrome-extension

browserify