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 बॉट इसे बासी के रूप में चिह्नित करने जा रहा है क्योंकि इसमें कुछ समय के लिए हाल की गतिविधि नहीं हुई है। यदि कुछ दिनों में कोई और गतिविधि नहीं होती है तो इसे बंद कर दिया जाएगा। इसे व्यक्तिगत रूप से न लें--गंभीरता से--यह पूरी तरह से स्वचालित कार्रवाई है। अगर यह एक गलती है, तो बस एक टिप्पणी करें, मुझे डीएम करें, एक वाहक कबूतर, या एक धूम्रपान संकेत भेजें।

@jaredpalmer क्या आप Hacktoberfest लेबल जोड़ सकते हैं?

हाँ

अच्छा विचार

बेशक, प्लगइन के साथ आपका क्या मतलब है? अगले आधिकारिक प्लगइन्स की तरह?

संकुल निर्देशिका में आधिकारिक प्लगइन्स हैं। आप वहां कुछ उदाहरण देख सकते हैं।

मैं 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 एकीकरण का अपना संस्करण भी साझा करूँगा, शायद यह किसी के लिए उपयोगी हो।

मैंने सोचा कि मुझे एससीएसएस के लिए सीएसएस नियमों को फिर से परिभाषित करने की आवश्यकता नहीं है, इसलिए मैं सिर्फ मूल की एक प्रति बना रहा हूं और एससीएसएस लोडर जोड़ रहा हूं।

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

नमस्ते, कृपया इसे आपके रैज़ल कॉन्फिगरेशन का उपयोग करने के लिए मुझे किन डिपेंडेंसीज की आवश्यकता होगी? आप उनका उल्लेख करने में विफल रहे

@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 कॉन्फ़िगरेशन इस तरह दिख सकता है। मैंने कम इस्तेमाल नहीं किया है, केवल सास लेकिन सामान्य नियम अभी भी लागू होने चाहिए।

'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 को स्थापित करने की आवश्यकता है।

मैं एससीएसएस के बारे में कुछ पुराने मुद्दों के बारे में सोच रहा हूं जो मुझे विश्वास है कि अब हल हो गए हैं। ऐसा नहीं लगता कि इस समय कोई कम पैकेज है, लेकिन अब एक एससीएसएस प्लगइन है।

एससीएसएस पैकेज अब यहां प्रकाशित हुआ है और मेरे लिए बहुत अच्छा काम करता है।
https://www.npmjs.com/package/razzle-plugin-scss

यहां उदाहरण देखें:
https://github.com/jaredpalmer/razzle/tree/master/examples/with-scss

दोनों ने अगली शाखा में जोड़ा, बंद करना