I would like to use css and scss in next.jsapp.
I have next.config.js in my project.
This configuration is for scss:
// next.config.js
const withSass = require('@zeit/next-sass');
module.exports = withSass({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
}
})
I don't know how to combine const withCSS = require('@zeit/next-css'); with my current config.
I would like to use custom config for scss (from my code snipet).
Can someone help me configure next for css and scss modules?
I tried:
// // next.config.js
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
module.exports = withCSS(withSass({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
}
}))
Not working...
This can also be done pretty easily without the next-compose-plugins library.
It's arguably a bit clearer too:
// next.config.js
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
module.exports = (phase, { defaultConfig }) => {
const plugins = [
withSass({ /* Plugin config here ... */ }),
withCSS({ /* Plugin config here ... */ }),
];
return plugins.reduce((acc, next) => next(acc), {
/* global config here ... */
});
};
I discovered this whilst complaining here: Source
You can use next-compose-plugins and combine multiple next.js plugins as follows:
// next.config.js
const withPlugins = require('next-compose-plugins');
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
module.exports = withPlugins(
[
[withSass, { /* plugin config here ... */ }],
[withCSS, { /* plugin config here ... */ }],
],
{
/* global config here ... */
},
);