I'm trying to add a custom webpack configuration to my nextjs project.
The goal is to automatically import @import "src/styles/variables.scss"; for every scss files in my app.
I have a webpack configuration for storybook which works as expected, but I don't succeed to make it works for nextJS.
webpackFinal: async (config, { configType }) => ({
...config,
module: {
...config.module,
rules: [
...config.module.rules,
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
},
{
test: /\.s[ac]ss$/i,
use: {
loader: 'sass-loader',
options: {
additionalData: '@import "src/styles/variables.scss";',
},
},
},
],
},webpack: (config) => ({
...config,
module: {
...config.module,
rules: [
...config.module.rules,
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, './'),
},
{
test: /\.s[ac]ss$/i,
use: {
loader: 'sass-loader',
options: {
additionalData: '@import "src/styles/variables.scss";',
},
},
},
],
},
})We can directly add sassOptions in next.config.js without sass-loader.
sassOptions: {
additionalData: `@import "src/styles/variables.scss"; @import "src/styles/mixins.scss";`,
},