Razzle: Ajouter scss et moins de plugins

des nouvelles de cette intégration ?

J'ai fait cette extension dans 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;
  }
};

Dépendances de développement :

"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 ! Alors voici l'accord, entre l'open source et mon travail et ma vie quotidienne et tout le reste, j'ai beaucoup de choses à gérer, j'utilise donc un bot GitHub pour automatiser quelques choses ici et là. Ce bot GitHub particulier va marquer cela comme obsolète car il n'a pas eu d'activité récente depuis un certain temps. Il sera fermé s'il n'y a plus d'activité dans quelques jours. Ne prenez pas cela personnellement - au sérieux - il s'agit d'une action entièrement automatisée. S'il s'agit d'une erreur, faites simplement un commentaire, envoyez-moi un DM, envoyez un pigeon voyageur ou un signal de fumée.

@jaredpalmer Pourriez-vous ajouter le label Hacktoberfest ?

Ouais

Bonne idée

Bien sûr, qu'entendez-vous par plugin? Vous aimez les prochains plugins officiels ?

Il existe des plugins officiels dans le répertoire packages. Vous pouvez y voir quelques exemples.

Je partagerai également ma version de l'intégration scss, peut-être que cela sera utile pour quelqu'un.

Je pensais que je ne devrais pas avoir besoin de redéfinir les règles css pour scss, donc je fais juste une copie de l'original et j'ajoute le chargeur 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;
    },
};

Je partagerai également ma version de l'intégration scss, peut-être que cela sera utile pour quelqu'un.

Je pensais que je ne devrais pas avoir besoin de redéfinir les règles css pour scss, donc je fais juste une copie de l'original et j'ajoute le chargeur 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;
    },
};

Salut, s'il vous plaît, de quelles devDependencies aurais-je besoin pour utiliser cette configuration de razzle ?. tu as omis de les mentionner

@Toyurc j'ai utilisé [email protected] et [email protected] .

Salut, y a-t-il une solution rapide pour lire moins ?
Je reçois

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

peu importe ce que j'installe etc

Salut, y a-t-il une solution rapide pour lire moins ?
Je reçois

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

peu importe ce que j'installe etc

Pour .less configuration pourrait ressembler à ceci. Je n'en ai pas utilisé moins, seulement du culot mais les règles générales devraient toujours s'appliquer.

'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 et less doivent être installés.

Je survole juste quelques vieux problèmes à propos de scss qui, je pense, sont résolus maintenant. Il ne semble pas qu'il y ait moins de paquet pour le moment, mais il y a maintenant un plugin scss pour info.

Le package scss est maintenant publié ici et fonctionne très bien pour moi.
https://www.npmjs.com/package/razzle-plugin-scss

Voir exemple ici :
https://github.com/jaredpalmer/razzle/tree/master/examples/with-scss

Les deux ajoutés dans la branche suivante, fermeture