Me gustaría usar css y scss en la aplicación next.js
Tengo next.config.js en mi proyecto.
Esta configuración es para scss :
// next.config.js const withSass = require('@zeit/next-sass'); module.exports = withSass({ cssModules: true, cssLoaderOptions: { importLoaders: 1, localIdentName: "[local]___[hash:base64:5]", } }) No sé cómo combinar const withCSS = require('@zeit/next-css'); con mi configuración actual.
Me gustaría usar una configuración personalizada para scss (de mi fragmento de código).
¿Puede alguien ayudarme a configurar a continuación para los módulos css y scss ?
Lo intenté:
// // 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]", } }))No funciona...
Esto también se puede hacer con bastante facilidad sin la biblioteca next-compose-plugins .
Podría decirse que también es un poco más claro:
// 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 ... */ }); };Descubrí esto mientras me quejaba aquí: Fuente
Puede usar next-compose-plugins y combinar varios complementos next.js de la siguiente manera:
// 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 ... */ }, );