Agregando variables de sass desde webpack

Clase 11 de 22 • Curso de Server Side Render con Express 2019

Omar Flores Grimontt

student•

A partir de la versión 8.0.0 de sass-loader la opción data fue renombrada a prependData, puedes encontrar más información acá.

Es probable que si tienes esta versión de sass-loader instalada no te funcionen los cambios implementados en la clase. Sólo debes cambiar data por prependData y todo bien.

O puedes instalar la versión 7.1.0 que es la que utilizan en el curso :).

Jorge Humberto Nemogá Pinzón

student•

La solución usando el paquete sass-loader mayor a 8.0.0 es así:

{
        test: /\.(s*)css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              prependData: `
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/Vars.scss')}";
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/MediaQueries.scss')}";
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/Base.scss')}";
                `,
            },
          },
        ],
      },

Favio Sauto

student•

Tengo un problema, escribo el mismo código del curso y me lanza muchos errores que no sé cómo solucionar, me aparece este error sobre todos mis archivos .scss

ERROR in ./src/frontend/assets/styles/components/Search.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--5-3!./src/frontend/assets/styles/components/Search.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

      display: flex;
    ^
          Media query expression must begin with '('
          in D:\Programming\Frontend\Curso Practico de React\PlatziVideo\src\frontend\assets\styles\components\Search.scss (line 2, column 1)

Me aparece ese mismo error para cada uno de mis components .scss

Carlos Sampol

Team Platzi•

Hola Fabio! Me podrías por favor compartir la configuración de sass en el loader por favor.

Favio Sauto

student•

¡Claro!

 {
        test: /.(s*)css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              data: `
                @import "${path.resolve(__dirname, varsLocation)}"
              `
            }
          }
        ]
      },

Jorge Humberto Nemogá Pinzón

student•

Para cualquiera que realice la practica de este video usando la versión de sass-loader 8.0.0:

La opción data ya no existe y ahora una forma es así:

{
        test: /\.(s*)css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              prependData: `
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/Vars.scss')}";
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/MediaQueries.scss')}";
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/Base.scss')}";
                `,
            },
          },
        ],
      },

Yesenia S. E.

student•

Alguien que pueda hecharle un ojo a mi repo por favor, al hacer npm run start:dev, no me marca ningún error, solo algunos warnings pero no me muestra nada en localhost, ya estuve buscando pero no encuentro como resolverlo. ¡¡GRACIAS!!

Jose Luis Campos Bautista

student•

Hola.

Asegurase de que esta importando correctamente los scripts generados.

Al remplazar los imports de scripts en el código del repositorio (feature/server-side-rendering), el despliegue se realiza correctamente.

<script type="text/javascript" src="assets/app.js"></script>
<script type="text/javascript" src="assets/vendor.js"></script>

Erik Ricardo Sánchez Pérez

student•

¿Me pregunto que tanto impacta en un flujo de trabajo el renombrar archivos? 🤔

Erik Elyager

student•

El renombrar archivos siempre va a causar bastante trabajo y puede producir errores.

Afortunadamente todos los editores profesionales de código tienen opciones de refactorización para que todo referencia al nombre de archivo sea reemplazada y así evitar errores.

Javier Fuentes Mora

teacher•

Igual muy mal demasiados errores :l

Didier Zúñiga

student•

También tengo el mismo problema de Favio, parece que no toma los .scss desde webpack.config.js

Carlos Sampol

Team Platzi•

Que problema exactamente estás teniendo? Me puedes compartir porfa el código de tu loader de scss?

Daniel Augusto Melgarejo Gómez

student•

En el archivo Vars.scss le falta comillas al import de url, por esto da problemas con sass-loader

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

Daniel Hurtado

student•

Cuál es la necesidad de realizar estos settings en un curso de server side render? Simplemente no hay necesidad, un curso más preciso es un millón de veces mejor que un curso largo sin enfoque claro.

David Camacho

student•

Hola, en mi caso me estaba dando error cuando intentaba cargar el archivo (es decir webpack no lo estaba cargando). Logré solucionando importanto el arhcivo sin el path.resolve(...) quedando de esta manera:

{
  loader: 'sass-loader',
  options: {
    data: `@import 'src/frontend/assets/styles/Vars.scss';`,
  },
},

Andres Roberto Coello Goyes

student•

data: `
                @import 'src/frontend/assets/styles/Vars.scss';
                @import 'src/frontend/assets/styles/Media.scss';
              `,

este fue lo que a mi me funciono

Luis Lira

student•

Igual a mí fue la única manera que me funcionó, por más que busqué y releí el código nunca pude hacerlo como en el vídeo con path.resolve

Wilson Marino Pablo Mendez

student•

Que raro a mí me función con el path.resolve

Daniel Ramírez Mendoza

student•

Para el error de los scss en el import falto el inicio de las comillas dobles quedando así:

data: `@import "${path.resolve(__dirname, 'src/frontend/assets/styles/Vars.scss')}";`

Si estás usando la version 8 de sass-loader, debes cambiar data por prependData

Jhurgen Maraza

student•

Alguien me puede ayudar? no entiendo cual sería el error. tengo los mismo directorios que el profe.

dejo mi Repo https://github.com/JhurgenMrz/Escuela-JS/tree/master/Ssr

Marifer Villarroel

student•

Hola Jhurgen

Si aún no has solucionado el problema, prueba a hacer la importación en el archivo de configuracion de webpack de esta manera:

@import "${path.resolve(__dirname, 'src/frontend/assets/styles/Vars.scss')}";

Nick David Fuenmayor Molinares

student•

Nada de esto es necesario...

rusbel bermúdez rivera

student•

importante

sass-loader ha cambiado, actualiza a la versión 8, por favor recuerda que borramos el import de path de webpack.config, vuelve a importarlo, y usa esta configuración

 {
        // Regla para trabajar con los archivos html
        test: /\.(s*)css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              prependData: `
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/Vars.scss')}";
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/Media.scss')}";
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/Base.scss')}";
                `,
            },
          },
        ],
      },

{
        test: /\.(s*)css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              prependData: `
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/Vars.scss')}";
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/MediaQueries.scss')}";
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/Base.scss')}";
                `,
            },
          },
        ],
      },

ERROR in ./src/frontend/assets/styles/components/Search.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--5-3!./src/frontend/assets/styles/components/Search.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

      display: flex;
    ^
          Media query expression must begin with '('
          in D:\Programming\Frontend\Curso Practico de React\PlatziVideo\src\frontend\assets\styles\components\Search.scss (line 2, column 1)

 {
        test: /.(s*)css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              data: `
                @import "${path.resolve(__dirname, varsLocation)}"
              `
            }
          }
        ]
      },

{
        test: /\.(s*)css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              prependData: `
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/Vars.scss')}";
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/MediaQueries.scss')}";
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/Base.scss')}";
                `,
            },
          },
        ],
      },

 {
        // Regla para trabajar con los archivos html
        test: /\.(s*)css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              prependData: `
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/Vars.scss')}";
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/Media.scss')}";
                @import "${path.resolve(__dirname, 'src/frontend/assets/styles/Base.scss')}";
                `,
            },
          },
        ],
      },

Agregando variables de sass desde webpack

Primeros pasos

¡Vamos a renovar este curso!

Introducción y presentación del curso

¿Qué es Server Side Rendering?

Babel, Express y React

Creación del proyecto base

Configuración de ESLint con Webpack

Preparación de Webpack, Babel, PostCSS y Assets

Usando Plugins y vendor file en Webpack

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Agregando variables de sass desde webpack

Aplicando history y creando rutas para el servidor

Haciendo initialState accesible y configurando Redux DevTools

Aplicar Server Side Rendering

Definiendo la función main para renderizado desde el servidor

Aplicando la función main para renderizado desde el servidor y creación del string de HTML

Assets require hook

Hydrate y estado de Redux desde Express

Trabaja con entornos de desarrollo y producción

Configurando nuestro servidor para producción

Configurando el frontend y webpack para producción

Compresión de Assets

Hashes

Cierre del Curso