convert - Sass con módulos CSS y Webpack

webpack sass output css file

Question

He estado construyendo un proyecto por un tiempo usando módulos Webpack, Sass y CSS. Normalmente en mis archivos .scss , defino una clase como:

:local(.button) {
color: white;
}

y en mis componentes React, en el método de render , requiero los estilos:

render = () => {
const styles = require(''./MyStyles.scss'');
<div className={ styles.button } />
}

y todo es bueno con el mundo. Todo funciona como se espera

Hoy estaba leyendo la página Módulos CSS y noté que ninguno de los selectores estaba abarcado por :local() como el mío y además estaban importando los estilos como:

import styles from ''./MyStyles.scss'';

Y pensé: "Guau, eso se ve mucho mejor, es más fácil ver dónde se importa, etc. Y me encantaría no usar :local() y solo tengo cosas locales por defecto". Así que lo intenté e inmediatamente me encontré con varios problemas.

1) `importar estilos desde ''./MyStyles.scss'';

Debido a que estoy usando ESLint en mis archivos React, inmediatamente me sale un error de que MyStyles.scss no tiene una exportación predeterminada que normalmente tendría sentido, pero la página de Módulos CSS indicaba:

Al importar el Módulo CSS desde un Módulo JS, exporta un objeto con todas las asignaciones de nombres locales a nombres globales.

así que naturalmente esperaba que la exportación predeterminada de la hoja de estilo sea el objeto al que se refieren también.

2) Intenté import { button } from ''./MyStyles.scss'';

Esto pasa deshilachando pero los registros de button no están definidos.

3) Si vuelvo al método require de importar mis estilos, cualquier cosa no especificada con :local no está definida.

Como referencia, mi cargador de webpack (también incluyo Node-Neat y Node-Bourbon , dos geniales bibliotecas):

{ test: /.(scss|css)$/, loader: ''style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]='' + encodeURIComponent(require(''node-bourbon'').includePaths) +
''&includePaths[]='' + encodeURIComponent(require(''node-neat'').includePaths[1]) + ''&includePaths[]='' + path.resolve(__dirname, ''..'', ''src/client/'') }

Mis preguntas, después de todo esto, son:

1) Cuando uso módulos CSS con Sass, ¿me limito a utilizar :local o :global ?

2) Ya que estoy usando un paquete web, ¿eso también significa que solo puedo require mis estilos?

Answer 1

Poco después de publicar, descubrí la solución. El problema, que pensé que era bastante confuso, estaba en la configuración de mi Webpack. Originalmente mi cargador parecía:

loader: ''style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap

lo cual me permitió 1) require mi Sass y 2) ajustar mis estilos en :local .

Sin embargo, al cargador CSS le faltaba la opción de modules para que se viera así:

loader: ''style!css?modules&sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap

Ahora puedo import mis estilos y no tengo que envolverlos en :local (aunque supongo que todavía puedo si quiero).

Lo que encontré más interesante de todo esto es que, sin la opción de modules , todavía se pueden usar las características de los módulos de CSS, aunque algo limitadas.

EDITAR:

Algo que noté, una advertencia futura para cualquiera que vea esta respuesta, es que si está usando eslint-plugin-import para eliminar las importaciones en su código JavaScript, arrojará un error al importar estilos como:

import styles from ''./MyStyles.scss'';

debido a la forma en que los módulos CSS exportan el objeto de estilos resultante. Eso significa que deberás require(''./MyStyles.scss'') para evitar advertencias o errores.