Question

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

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

我用browserify和yarn来安装bulma。

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

import Styles from './styles.css'

并且styles.css的第一行看起来像这样：

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

这是package.json

中的构建命令

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

然后只需使用

更新index.html / popup.html

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

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

2 个答案: