Google chrome extension 如何在发布之前构建chrome扩展css文件？
我构建了一个简单的chrome扩展，并想发布它 问题是，我不知道如何处理一些css文件 我用browserify和纱线安装bulma 在main.js中，我得到了以下几行： 从“./Styles.css”导入样式 styles.css的第一行如下所示： @导入“../node_modules/bulma/css/bulma.css” 下面是package.json中的构建命令 还有我的index.html popup.htmlGoogle chrome extension 如何在发布之前构建chrome扩展css文件？,google-chrome-extension,browserify,Google Chrome Extension,Browserify,我构建了一个简单的chrome扩展，并想发布它 问题是，我不知道如何处理一些css文件 我用browserify和纱线安装bulma 在main.js中，我得到了以下几行： 从“./Styles.css”导入样式 styles.css的第一行如下所示： @导入“../node_modules/bulma/css/bulma.css” 下面是package.json中的构建命令 还有我的index.html popup.html <!DOCTYPE html> <html lan
<!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_模块一起编译。下面的脚本使用gulp sass编译sass/scss样式的文件 或者，由于bulma似乎使用css loaderhaven，因此您不需要查找它，您可以使用从捆绑包文件中提取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，最后执行以下操作： 纱线添加browserify css-开发 然后将以下命令添加到build命令 -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
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