I’m working on a React 18 project and I want to load my SCSS styles globally using Webpack 5 configuration, rather than importing each style file into its respective components.
Currently, I’m importing SCSS files in individual components like this:
// src/components/AuthSSO/Login.tsx
import "../../styles/new.scss"
However, I’d prefer to set up my Webpack 5 configuration to load these styles globally for the entire application. This would help reduce redundant imports and make style management more centralized.
Here’s my current Webpack 5 configuration (relevant parts):
const path = require("path")
const OutputPath = path.resolve(__dirname, "../build")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const TerserPlugin = require("terser-webpack-plugin")
require("css-minimizer-webpack-plugin")
if (process.env.NODE_ENV !== "production") {
console.log("Development mode")
}
module.exports = (env, argv) => {
const devMode = argv.mode !== "production"
return {
entry: {
index: "./src/webpack/index.tsx",
styles: ["./src/styles/main.scss", "./src/styles/main-dark.scss"],
},
output: {
filename: devMode ? "js/[name].js" : "js/[name].[contenthash].js",
path: OutputPath,
publicPath: "/",
assetModuleFilename: "assets/[name][ext][query]",
},
devtool: devMode ? "eval-cheap-source-map" : false,
devServer: {
historyApiFallback: true,
open: true,
host: "localhost",
port: 8080,
hot: false,
client: {
overlay: {
warnings: true,
errors: true,
},
},
proxy: {
"/api": {
target: "http://localhost:8000", // Local
changeOrigin: true,
},
},
},
performance: {
hints: false,
},
module: {
rules: [
{
test: /.(ts|tsx)$/,
use: "ts-loader",
exclude: /node_modules/,
},
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: () => [require("autoprefixer"), require("precss")],
},
},
},
{
loader: "sass-loader",
},
],
},
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\/]node_modules[\/]/,
name: "vendor",
chunks: "all",
},
},
},
minimizer: [
new TerserPlugin({
extractComments: false,
}),
],
},
plugins: [
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ["css", "js", "fonts", "img/webpack"],
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "index.html",
inject: true,
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: devMode ? "css/[name].css" : "css/[name].[contenthash].css",
chunkFilename: devMode
? "css/[name].css"
: "css/[name].[contenthash].css",
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
],
stats: {
children: false,
},
externals: {
Config: JSON.stringify(
process.env.NODE_ENV === "production"
? {
serverUrl: "",
}
: {
serverUrl: "http://localhost:8000",
}
),
},
}
}
index.tsx
import React from "react"
import ReactDOM from "react-dom/client"
// eslint-disable-next-line import/no-named-as-default
import App from '../App'
import 'bootstrap-icons/font/bootstrap-icons.css'
import '../styles/main.scss' // <-- this import is not working ( Tying to achive like this or to get rid of this )
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
)
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
)
What changes do I need to make to my Webpack 5 configuration to achieve global SCSS loading? Are there any potential drawbacks or considerations I should be aware of when implementing this approach?
Thank you in advance for your help!
I have tried different solutions from all over the web
I’ve tried to configure from above solutions:
- I configured my Webpack setup to include SCSS files in the entry option.
- I used MiniCssExtractPlugin to extract the styles into separate CSS files.
- My Webpack configuration includes loaders for SCSS (sass-loader, css-loader, postcss-loader), and everything seems to be in order.
- The styles are being bundled, but they’re not being applied globally as expected. I still need to import the styles manually in each component for them to take effect.
What I Expected:
I expected the global SCSS styles to be automatically applied across all components in my React application, without the need to import them in every individual component file.
