mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Update webpack config to build sass themes

Browse source
This commit is contained in:
Bill Thornton 2025-03-25 12:21:57 -04:00
parent 1161cefe88
commit a768ca3037
3 changed files with 76 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

80
webpack.common.js
View file

@ -60,13 +60,14 @@ const config = {
filename: 'index.html',
template: 'index.html',
// Append file hashes to bundle urls for cache busting
hash: true
hash: true,
chunks: [
'main.jellyfin',
'serviceworker'
]
}),
new CopyPlugin({
patterns: [
{
from: 'themes/**/*.{css,jpg}'
},
{
from: 'assets/**',
globOptions: {
@ -107,6 +108,15 @@ const config = {
typescript: {
configFile: path.resolve(__dirname, 'tsconfig.json')
}
}),
new MiniCssExtractPlugin({
filename: pathData => {
if (pathData.chunk?.name?.startsWith('themes/')) {
return '[name]/theme.css';
}
return '[name].[contenthash].css';
},
chunkFilename: '[name].[contenthash].css'
})
],
output: {
@ -288,33 +298,41 @@ const config = {
}]
},
{
test: /\.s[ac]ss$/i,
use: [
DEV_MODE ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
test: /\.(sa|sc|c)ss$/i,
oneOf: [
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: path.resolve(__dirname, 'postcss.config.js')
}
}
// Themes always need to use the MiniCssExtractPlugin since they are loaded directly
include: [
path.resolve(__dirname, 'src/themes/')
],
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: path.resolve(__dirname, 'postcss.config.js')
}
}
},
'sass-loader'
]
},
'sass-loader'
]
},
{
test: /\.css$/i,
use: [
DEV_MODE ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: path.resolve(__dirname, 'postcss.config.js')
}
}
use: [
DEV_MODE ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: path.resolve(__dirname, 'postcss.config.js')
}
}
},
'sass-loader'
]
}
]
},
@ -341,10 +359,4 @@ const config = {
}
};
if (!DEV_MODE) {
config.plugins.push(new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
}));
}
module.exports = config;

17
webpack.dev.js
View file

@ -1,11 +1,26 @@
const common = require('./webpack.common');
const { merge } = require('webpack-merge');
const THEMES = [
'appletv',
'blueradiance',
'dark',
'light',
'purplehaze',
'wmc'
];
module.exports = merge(common, {
// In order for live reload to work we must use "web" as the target not "browserslist"
target: process.env.WEBPACK_SERVE ? 'web' : 'browserslist',
mode: 'development',
entry: { 'main.jellyfin': './index.jsx' },
entry: {
'main.jellyfin': './index.jsx',
...THEMES.reduce((acc, theme) => {
acc[`themes/${theme}`] = `./themes/${theme}/theme.scss`;
return acc;
}, {})
},
devtool: 'eval-cheap-module-source-map',
module: {
rules: [

15
webpack.prod.js
View file

@ -1,10 +1,23 @@
const common = require('./webpack.common');
const { merge } = require('webpack-merge');
const THEMES = [
'appletv',
'blueradiance',
'dark',
'light',
'purplehaze',
'wmc'
];
module.exports = merge(common, {
mode: 'production',
entry: {
'main.jellyfin': './index.jsx',
'serviceworker': './serviceworker.js'
'serviceworker': './serviceworker.js',
...THEMES.reduce((acc, theme) => {
acc[`themes/${theme}`] = `./themes/${theme}/theme.scss`;
return acc;
}, {})
}
});