Razzle: أضف scss وإضافات أقل

هل من أخبار عن هذا التكامل حتى الآن؟

لقد فعلت هذا ممتدًا في 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;
  }
};

تبعيات ديف:

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

أولا! إذن ، هذه هي الصفقة ، بين المصدر المفتوح وعملي اليومي وحياتي وما هو غير ذلك ، لدي الكثير لأديره ، لذلك أستخدم GitHub bot لأتمتة بعض الأشياء هنا وهناك. سيحدد برنامج GitHub bot هذا على أنه قديم لأنه لم يكن لديه نشاط حديث لفترة من الوقت. سيتم إغلاقه إذا لم يحدث أي نشاط آخر في غضون أيام قليلة. لا تأخذ هذا على محمل الجد - فهذا إجراء آلي بالكامل. إذا كان هذا خطأ ، فما عليك سوى تقديم تعليق أو إرسال رسالة مباشرة إليّ أو إرسال حامل ناقل أو إشارة دخان.

jaredpalmer هل يمكنك إضافة علامة Hacktoberfest؟

نعم

فكرة جيدة

بالطبع ، ماذا تقصد بالمكون الإضافي؟ مثل الإضافات الرسمية التالية؟

توجد مكونات إضافية رسمية في دليل الحزم. يمكنك أن ترى بعض الأمثلة هناك.

سأشارك نسختى من تكامل scss أيضًا ، ربما تكون مفيدة لشخص ما.

اعتقدت أنني لا يجب أن أحتاج إلى إعادة تعريف قواعد css لـ scss ، لذلك أنا فقط أقوم بعمل نسخة من محمل 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;
    },
};

سأشارك نسختى من تكامل scss أيضًا ، ربما تكون مفيدة لشخص ما.

اعتقدت أنني لا يجب أن أحتاج إلى إعادة تعريف قواعد css لـ scss ، لذلك أنا فقط أقوم بعمل نسخة من محمل 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;
    },
};

مرحبًا ، من فضلك ما هي devDependencies التي سأحتاجها لاستخدام هذا التكوين المهرج ؟. لقد فشلت في ذكرهم

Toyurc لقد استخدمت [email protected] و [email protected] .

مرحبًا ، هل هناك أي حل سريع لقراءة أقل؟
انا حصلت

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

بغض النظر عن ما أقوم بتثبيته وما إلى ذلك

مرحبًا ، هل هناك أي حل سريع لقراءة أقل؟
انا حصلت

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

بغض النظر عن ما أقوم بتثبيته وما إلى ذلك

بالنسبة لـ .less قد يبدو التكوين هكذا. لم أستخدم أقل ، فقط sass ولكن يجب أن تظل القواعد العامة سارية.

'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 و less .

أنا فقط أقوم بتصفح بعض المشكلات القديمة حول scss والتي أعتقد أنه تم حلها الآن. لا يبدو أن هناك حزمة أقل في الوقت الحالي ، ولكن يوجد الآن مكون إضافي scss fyi.

تم نشر حزمة scss الآن هنا وتعمل بشكل رائع بالنسبة لي.
https://www.npmjs.com/package/razzle-plugin-scss

انظر المثال هنا:
https://github.com/jaredpalmer/razzle/tree/master/examples/with-scss

كلاهما أضاف في الفرع التالي ، مغلق