Razzle: Agregue scss y menos complementos

¿Alguna noticia sobre esta integración todavía?

Hice esto extendiendo en razzle.config.js

"use strict";

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  modify: (config, { target, dev }, webpack) => {

    const appConfig = Object.assign({}, config);

    // Setup SCSS
    if (target === "web") {

      appConfig.module.rules.push(
        {
          test: /\.(sa|sc|c)ss$/,
          use: [
            dev ? 'style-loader' : MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader',
          ]
        }
      );

    }
    else {
      // On the server, we can just simply use css-loader to
      // deal with scss imports
      appConfig.module.rules.push({
        test: /\.(sa|sc|c)ss$/,
        use: "css-loader"
      });
    }

    return appConfig;
  }
};

Dependencias de desarrollo:

"devDependencies": {
    "css-loader": "^1.0.0",
    "mini-css-extract-plugin": "^0.4.1",
    "node-sass": "^4.9.2",
    "razzle": "^2.4.0",
    "sass-loader": "^7.1.0"
  }

¡Hola! Así que aquí está el trato, entre el código abierto y mi trabajo diario y mi vida y lo que no, tengo mucho que administrar, así que uso un bot de GitHub para automatizar algunas cosas aquí y allá. Este bot de GitHub en particular lo marcará como obsoleto porque no ha tenido actividad reciente durante un tiempo. Se cerrará si no se realizan más actividades en unos días. No se lo tome personalmente, en serio, es una acción completamente automatizada. Si esto es un error, simplemente haga un comentario, envíeme un mensaje de texto, envíe un pidgeon portador o una señal de humo.

@jaredpalmer ¿Podrías agregar la etiqueta Hacktoberfest?

sí

Buen Idae

Por supuesto, ¿a qué te refieres con plugin? ¿Te gustan los próximos complementos oficiales?

Hay complementos oficiales en el directorio de paquetes. Puedes ver algunos ejemplos allí.

También compartiré mi versión de la integración de scss, tal vez sea útil para alguien.

Pensé que no debería necesitar redefinir las reglas css para scss, así que solo estoy haciendo una copia del original y agregando el cargador scss.

'use strict';

const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
const paths = require('razzle/config/paths');

const cssLoaderFinder = makeLoaderFinder('css-loader');
module.exports = {
    modify(baseConfig, {dev}, webpack) {
        /* make a copy of config */
        const config = Object.assign({}, baseConfig);

        const scssLoader = {
            loader: require.resolve('sass-loader'),
            options: {
                sourceMap: dev,
            },
        };

        // Copy base css rules and add scss support
        config.module.rules.filter(cssLoaderFinder).forEach(rule => {
            const isCssModuleRule = !rule.test.test('module.css');
            const scssExclude = [paths.appBuild];
            let scssTest = /\.s[ac]ss$/;
            if (isCssModuleRule) {
                scssTest = /\.module\.s[ac]ss$/;
            } else {
                scssExclude.push(/\.module\.s[ac]ss$/);
            }

            // Use default configs
            config.module.rules.push({
                test: scssTest,
                exclude: scssExclude,
                use: [
                    ...rule.use,
                    scssLoader,
                ]
            });
        });

        // adding ./src to module resolver so I can import modules with absolute paths
        config.resolve.modules.push('./src');

        return config;
    },
};

También compartiré mi versión de la integración de scss, tal vez sea útil para alguien.

Pensé que no debería necesitar redefinir las reglas css para scss, así que solo estoy haciendo una copia del original y agregando el cargador scss.

'use strict';

const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
const paths = require('razzle/config/paths');

const cssLoaderFinder = makeLoaderFinder('css-loader');
module.exports = {
    modify(baseConfig, {dev}, webpack) {
        /* make a copy of config */
        const config = Object.assign({}, baseConfig);

        const scssLoader = {
            loader: require.resolve('sass-loader'),
            options: {
                sourceMap: dev,
            },
        };

        // Copy base css rules and add scss support
        config.module.rules.filter(cssLoaderFinder).forEach(rule => {
            const isCssModuleRule = !rule.test.test('module.css');
            const scssExclude = [paths.appBuild];
            let scssTest = /\.s[ac]ss$/;
            if (isCssModuleRule) {
                scssTest = /\.module\.s[ac]ss$/;
            } else {
                scssExclude.push(/\.module\.s[ac]ss$/);
            }

            // Use default configs
            config.module.rules.push({
                test: scssTest,
                exclude: scssExclude,
                use: [
                    ...rule.use,
                    scssLoader,
                ]
            });
        });

        // adding ./src to module resolver so I can import modules with absolute paths
        config.resolve.modules.push('./src');

        return config;
    },
};

Hola, por favor, ¿qué devDependencies necesitaría para usar esta configuración de razzle? fallaste en mencionarlos

@Toyurc Usé [email protected] y [email protected] .

Hola, ¿hay alguna solución rápida para leer menos?
yo obtengo

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> <strong i="7">@import</strong>

no importa lo que instale, etc.

Hola, ¿hay alguna solución rápida para leer menos?
yo obtengo

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> <strong i="8">@import</strong>

no importa lo que instale, etc.

Para .less config podría verse así. No he usado menos, solo descaro, pero las reglas generales aún deberían aplicarse.

'use strict';

const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
const paths = require('razzle/config/paths');

const cssLoaderFinder = makeLoaderFinder('css-loader');
module.exports = {
    modify(baseConfig, {dev}, webpack) {
        /* make a copy of config */
        const config = Object.assign({}, baseConfig);

        const lessLoader = {
            loader: require.resolve('less-loader'),
            options: {
                sourceMap: dev,
            },
        };

        // Copy base css rules and add less support
        config.module.rules.filter(cssLoaderFinder).forEach(rule => {
            const isCssModuleRule = !rule.test.test('module.css');
            const lessExclude = [paths.appBuild];
            let lessTest = /\.less$/;
            if (isCssModuleRule) {
                lessTest = /\.module\.less$/;
            } else {
                lessExclude.push(/\.module\.less$/);
            }

            // Use default configs
            config.module.rules.push({
                test: lessTest,
                exclude: lessExclude,
                use: [
                    ...rule.use,
                    lessLoader,
                ]
            });
        });

        // adding ./src to module resolver so I can import modules with absolute paths
        config.resolve.modules.push('./src');

        return config;
    },
};

less-loader y less deben instalarse.

Solo estoy repasando algunos problemas antiguos sobre scss que creo que están resueltos ahora. No parece que haya un paquete menos en este momento, pero ahora hay un complemento scss para su información.

El paquete scss ahora está publicado aquí y me funciona muy bien.
https://www.npmjs.com/package/razzle-plugin-scss

Vea el ejemplo aquí:
https://github.com/jaredpalmer/razzle/tree/master/examples/with-scss

Ambos agregados en la siguiente rama, cerrando