NextJS - 使用 sass-loader 将变量添加到每个 scss 文件

Question

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.

There is my Storybook config:

 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";', }, }, }, ], },

There is my next.config.js

 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";', }, }, }, ], }, })

Answer 1

SOLVED

We can directly add sassOptions in next.config.js without sass-loader...

 sassOptions: { additionalData: `@import "src/styles/variables.scss"; @import "src/styles/mixins.scss";`, },