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

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

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

我使用浏览器化和纱线来安装bulma。

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

import Styles from './styles.css'

第一行样式.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

和我的索引.html(弹出窗口.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文件夹，弹出窗口显然看起来不好。

你要么切换到 sass，使用 Gulp 和 sass 来表示 Bulma，然后编译你的 sass 文件和你的node_modules。下面的脚本使用 gulp-sasss 编译 sass/scss 样式文件。

或者，由于 bulma 似乎使用了css-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",

最终执行以下操作：

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">

相关内容

最新更新

热门标签：