Razzle: Scss und weniger Plugins hinzufügen

Gibt es schon Neuigkeiten zu dieser Integration?

Ich habe dies in razzle.config.js erweitert

"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;
  }
};

Abhängigkeiten von Entwicklern:

"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"
  }

Hallo! Hier ist also der Deal, zwischen Open Source und meinem täglichen Job und Leben und was nicht, ich habe viel zu verwalten, also verwende ich einen GitHub-Bot, um hier und da ein paar Dinge zu automatisieren. Dieser spezielle GitHub-Bot wird dies als veraltet markieren, da er seit einiger Zeit keine Aktivität mehr hatte. Es wird geschlossen, wenn in einigen Tagen keine Aktivität mehr stattfindet. Nehmen Sie dies nicht persönlich – ernst – dies ist eine vollständig automatisierte Aktion. Wenn dies ein Fehler ist, machen Sie einfach einen Kommentar, senden Sie mir eine DM, senden Sie eine Brieftaube oder ein Rauchzeichen.

@jaredpalmer Könnten Sie das Hacktoberfest-Label hinzufügen?

Jep

Gute Idee

Was meinst du natürlich mit Plugin? Wie die nächsten offiziellen Plugins?

Es gibt offizielle Plugins im Paketverzeichnis. Sie können dort einige Beispiele sehen.

Ich werde auch meine Version der Scss-Integration teilen, vielleicht ist sie für jemanden nützlich.

Ich dachte, dass ich die CSS-Regeln für Scss nicht neu definieren muss, also mache ich nur eine Kopie des Originals und füge den Scss-Loader hinzu.

'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;
    },
};

Ich werde auch meine Version der Scss-Integration teilen, vielleicht ist sie für jemanden nützlich.

Ich dachte, dass ich die CSS-Regeln für Scss nicht neu definieren muss, also mache ich nur eine Kopie des Originals und füge den Scss-Loader hinzu.

'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;
    },
};

Hallo, bitte welche devDependencies brauche ich, um diese Ihre Razzle-Konfiguration zu verwenden?. du hast sie nicht erwähnt

@Toyurc Ich habe [email protected] und [email protected] .

Hallo, gibt es eine schnelle Lösung, um weniger zu lesen?
Ich bekomme

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

egal was ich installiere etc

Hallo, gibt es eine schnelle Lösung, um weniger zu lesen?
Ich bekomme

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

egal was ich installiere etc

Für .less könnte die Konfiguration so aussehen. Ich habe nicht weniger verwendet, nur sass aber allgemeine Regeln sollten noch gelten.

'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 und less müssen installiert werden.

Ich überfliege nur einige alte Probleme mit Scss, von denen ich glaube, dass sie jetzt gelöst sind. Es sieht nicht so aus, als ob es derzeit weniger Pakete gibt, aber jetzt gibt es ein Scss-Plugin.

Das scss-Paket ist jetzt hier veröffentlicht und funktioniert bei mir hervorragend.
https://www.npmjs.com/package/razzle-plugin-scss

Siehe Beispiel hier:
https://github.com/jaredpalmer/razzle/tree/master/examples/with-scss

Beide im nächsten Zweig hinzugefügt, schließend