diff --git a/package.json b/package.json
index d0735cc..8ff284d 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
"extract-loader": "^5.1.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
+ "mini-css-extract-plugin": "^1.3.1",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
diff --git a/source/options.html b/source/options.html
index c4fc447..1fbcd42 100644
--- a/source/options.html
+++ b/source/options.html
@@ -5,7 +5,6 @@
Options
-
diff --git a/source/popup.html b/source/popup.html
index 6075f1b..68782f8 100644
--- a/source/popup.html
+++ b/source/popup.html
@@ -5,7 +5,6 @@
Popup
-
diff --git a/source/scripts/options.js b/source/scripts/options.js
index 83b4f59..72da200 100644
--- a/source/scripts/options.js
+++ b/source/scripts/options.js
@@ -1,4 +1,6 @@
import 'emoji-log';
+import '../styles/options.scss';
+
// eslint-disable-next-line no-console
console.emoji('🦄', 'Hello World from options main file!');
diff --git a/source/scripts/popup.js b/source/scripts/popup.js
index bf37e5f..0894eae 100644
--- a/source/scripts/popup.js
+++ b/source/scripts/popup.js
@@ -1,6 +1,8 @@
import 'emoji-log';
import browser from 'webextension-polyfill';
+import '../styles/popup.scss';
+
function openWebPage(url) {
return browser.tabs.create({url});
}
diff --git a/webpack.config.js b/webpack.config.js
index d26b2da..37ad766 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,9 +5,9 @@ const TerserPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ExtensionReloader = require('webpack-extension-reloader');
const WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin');
-const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const nodeEnv = process.env.NODE_ENV || 'development';
@@ -58,7 +58,6 @@ module.exports = {
contentScript: './source/scripts/contentScript.js',
popup: './source/scripts/popup.js',
options: './source/scripts/options.js',
- styles: ['./source/styles/popup.scss', './source/styles/options.scss'],
},
output: {
@@ -100,14 +99,8 @@ module.exports = {
test: /\.scss$/,
use: [
{
- loader: 'file-loader',
- options: {
- name: '[name].css',
- context: './source/styles/',
- outputPath: 'css/',
- },
+ loader: MiniCssExtractPlugin.loader, // It creates a CSS file per JS file which contains CSS
},
- 'extract-loader',
{
loader: 'css-loader',
options: {
@@ -135,8 +128,6 @@ module.exports = {
new WextManifestWebpackPlugin(),
// Generate sourcemaps
new webpack.SourceMapDevToolPlugin({filename: false}),
- // Remove style entries js bundle
- new FixStyleOnlyEntriesPlugin({silent: true}),
new webpack.EnvironmentPlugin(['NODE_ENV', 'TARGET_BROWSER']),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [
@@ -149,15 +140,19 @@ module.exports = {
cleanStaleWebpackAssets: false,
verbose: true,
}),
+ // write css file(s) to build folder
+ new MiniCssExtractPlugin({filename: 'css/[name].css'}),
new HtmlWebpackPlugin({
template: 'source/options.html',
- // inject: false,
+ inject: 'body',
+ hash: true,
chunks: ['options'],
filename: 'options.html',
}),
new HtmlWebpackPlugin({
template: 'source/popup.html',
- // inject: false,
+ inject: 'body',
+ hash: true,
chunks: ['popup'],
filename: 'popup.html',
}),