Tengo una aplicación Next.js con un archivo css global main.scss importado en el archivo pages/_app.js .
_app.js
import '../global-styles/main.scss' export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> }Los estilos de este archivo funcionan.
También tengo algunos archivos scss modulares adjuntos a los componentes, usando [componente].module.scss.
He escrito una variable en mi archivo variables.scss , uno de los archivos que @import en main.scss ,
variables.scss
$mobile: 750px;principal.scss
@import './fonts.scss'; @import './variables.scss'; @import './global.scss';Sin embargo, cuando trato de usar esta variable en uno de mis css modulares, aparece un error
./module-styles/navbar.module.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-3-1!./node_modules/postcss-loader/src??__nextjs_postcss!./node_modules/resolve-url-loader??ref--5-oneOf-3-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-3-4!./module-styles/navbar.module.scss) SassError: Undefined variable: "$mobile". on line 19 of /Users/Parv/Documents/reactx/module-styles/navbar.module.scss >> @media (max-width: $mobile) { ---------------------------^Mi pregunta es, ¿por qué no aparecen mis variables globales que declaro en mi main.scss?
Simplemente agregue esto a su archivo next.config.js y reinicie
const path = require('path') module.exports = { sassOptions: { includePaths: [path.join(__dirname, 'styles')], prependData: `@import "main.scss";` } }Lo resuelvo agregando mis variables globales a next.config.js. No es una buena solución pero funciona.
module.exports = { sassOptions: { includePaths: [path.join(__dirname, 'styles')], prependData: ` $primary-font-regular: 'Gotham'; $primary-font-medium: 'Gotham'; $default-font-size: 16px; $h1: 5.208vw; $h4: 1.458vw; $primary-color: #000000; $gray: #CCCCCC; `, }, };Puede seguir este enlace para obtener la respuesta: https://github.com/vercel/next.js/pull/12277
la forma más fácil es agregar un archivo con importación variable y agregar un alias a tsconfig
sassOptions: { includePaths: ['./src'], prependData: `@import "~@styles/variable.scss";`, }Actualizar:
En el archivo next.config.js necesita agregar este código (debe crearlo si no existe tal archivo)
module.exports = (phase, {defaultConfig}) => { if ('sassOptions' in defaultConfig) { defaultConfig['sassOptions'] = { includePaths: ['./src'], prependData: `@import "~@styles/variables.scss";`, } } return defaultConfig; }En el archivo tsconfig.json necesita agregar un alias
"baseUrl": ".", "paths": { ... "@styles/*": [ "src/styles/*" ], ...Luego cree un archivo con estilos en la ruta: src/styles/variable.scss en variable.scss puede importar otro archivo scss
No está relacionado con Next.js, sino con la forma en que funciona sass-loader . Cada importación de un archivo scss desde un archivo js se trata como un entorno sass aislado , por lo tanto, no existen tales "variables globales".
Este comportamiento requiere que importe el archivo variables.scss de cada archivo scss que usa una de las variables.
Nota al margen: es importante que estos archivos scss comunes (como sus variables.scss ) no contengan css "normal", porque si es así, se duplicarán muchas veces (la cantidad de importaciones).