मेरे पास एक मुख्य स्टाइलशीट style.scss है, जिसे मैंने अपनी मुख्य JavaScript फ़ाइल script.js में आयात किया है:

import "./style.scss";

यह बहुत अच्छा काम करता है, और मैं अपनी वेबसाइट को देव मोड में बना सकता हूं। अब मैं अलग स्टाइलशीट का उपयोग करना चाहता था और उन्हें @import नियम के साथ अपनी मुख्य स्टाइलशीट में आयात करना चाहता था, जैसे:

@import "./blocks/SCSS/test.scss" screen and (min-width: 600px);

लेकिन अब मुझे यह त्रुटि संदेश मिलता है:

ERROR in ./dev/style.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./dev/style.scss)  
Module build failed (from ./node_modules/css-loader/dist/cjs.js):  
Error: Can't resolve './blocks/SCSS/test.scss' in 'D:\Art Files\Design\Eigene Projekte\WP Book Theme Dev\dev'

और मुझे समझ में नहीं आता कि यह इसे हल क्यों नहीं कर सकता। मैं अपने जावास्क्रिप्ट के लिए भी मॉड्यूल का उपयोग करता हूं, जो बहुत अच्छा काम करता है। लेकिन अब SCSS के साथ, यह बिल्कुल भी काम नहीं करता है।

मैंने समाधान के लिए गुगलिंग की कोशिश की और कई खुले धागे की जांच की, कोई भी मेरी मदद नहीं कर सका।
यहां कुछ ऐसे हैं जिन्हें मैंने स्टैक ओवरफ्लो पर चेक आउट किया है:

मेरा नोड संस्करण 12.18.3 था, जहां मुझे पहले त्रुटि हुई थी। अब मैंने अपने नोड को LTS से 14.15.4 में अपडेट कर दिया है, फिर भी वही त्रुटि है।

यहां मेरी वेबपैक कॉन्फ़िगरेशन फ़ाइलें हैं:

// webpack.common.js

const path = require("path");

module.exports = {
  entry: "./dev/script.js",
  
  module: {
    rules: [
      {
        test: /\.html$/i,
        use: ["html-loader"],
      },
      {
        test: /\.(svg|png|jpg)$/i,
        use: {
          loader: "file-loader",
          options: {
            esModule: false,
            name: "[name].[hash].[ext]",
            outputPath: "assets/images",
          },
        },
      },
    ],
  },
};


// webpack.dev.js

const path = require("path");
const common = require("./webpack.common.js");
const { merge } = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = merge(common, {
  mode: "development",
  plugins: [
    new HtmlWebpackPlugin({
      template: "./dev/post.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  devServer: {
    contentBase: "./dist",
  },
  output: {
    filename: "script.dev.js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "./",
  },
});

यहाँ मेरी वेबपैक निर्भरताएँ हैं:

"devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.3",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "sass": "^1.32.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.0.3",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.0",
    "webpack-dev-server": "^3.11.1",
    "webpack-merge": "^5.7.3"
  },
1
Mähnenwolf 21 जिंदा 2021, 14:48

2 जवाब

सबसे बढ़िया उत्तर

मैंने अपनी समस्या को ठीक करने के लिए यही किया। अमरेश ने पहले ही कुछ बता दिया था कि मुझे क्या याद आ रहा है, लेकिन इससे मेरी समस्या का समाधान नहीं हुआ, क्योंकि मुझे इस बारे में कोई वास्तविक स्पष्टीकरण नहीं दिया गया था कि इससे मदद क्यों मिलेगी। अंत में, मैंने sass* इंस्टाल किया, और तब से < code>node-sass पदावनत है, मैंने इस पर कोई ध्यान नहीं दिया।

जिस तरह से मैंने @import का इस्तेमाल किया वह शायद गलत था। मैं इसे मूल सीएसएस तरीके से करने की कोशिश कर रहा था (MDN) , लेकिन हो सकता है कि SCSS उसे अधिलेखित कर रहा हो। @import SCSS द्वारा भी अब तक बहिष्कृत कर दिया गया है और अनुशंसित नहीं है। जब मैंने एससीएसएस वेबसाइट की दोबारा जांच की, तो मैं एससीएसएस का उपयोग करने के तरीके के बारे में उनके गाइड के पास गया, और उन्होंने उल्लेख किया कि मैं एक और स्टाइलशीट आयात करने के लिए @use का उपयोग कैसे कर सकता हूं। मैंने जो सीखा वह यह था कि मुझे आंशिक का उपयोग करने की आवश्यकता है। मुझे उसके लिए एक नाम स्थान बनाने के लिए एक अंडरस्कोर के साथ फ़ाइल नामों का नेतृत्व करना था, और इसे @use नियम का उपयोग करके आयात करना था।

उनके उदाहरण से:

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

* मुझे नहीं पता कि sass की स्थापना ने वास्तव में मदद की या नहीं। चूंकि पैकेज जावास्क्रिप्ट के साथ काम कर रहा है, जो मैंने अपनी फाइल में नहीं किया है। लेकिन चूंकि पैकेज का उल्लेख sass-loader में भी किया गया है, मैं रखूंगा यह।

@use का उपयोग करते समय यह याद रखना महत्वपूर्ण है कि आप नई फ़ाइल में फ़ाइल को कैसे संभालते हैं।

// src/_list.scss
@mixin list{
    ul {
        display: flex;
        flex-direction: row;
        li {
            text-align: center;
            padding: 5px;
        }
    }
}

केवल यूआरएल को कॉल करके, आपको नेमस्पेस निर्दिष्ट करना होगा और फिर उस नेमस्पेस से आप क्या उपयोग करना चाहते हैं।

// styles.scss
@use "src/list";

header {
  @include list.list;
}

आप एक नया नाम स्थान कॉल कर सकते हैं और इसे एक कस्टम नाम दे सकते हैं।

// styles.scss
@use "src/list" as myList;

header {
  @include myList.list;
}

या आप इसे कॉल कर सकते हैं और इसे कॉल करते समय नेमस्पेस लिखने के बिना, इसे उपलब्ध कराने के लिए तारांकन के साथ नाम दे सकते हैं।

// styles.scss
@use "src/list" as *;

header {
  @include list;
}

आगे पढ़ने के लिए, कृपया @use पर उनके दस्तावेज़ देखें।

0
Mähnenwolf 22 जिंदा 2021, 15:32

जांचें कि क्या आपने ये सभी पैकेज स्थापित किए हैं:

  1. sass (https://www.npmjs.com/package/sass)
  2. sass-loader (https://www.npmjs.com/package/sass-loader)
  3. css-loader (https://www.npmjs.com/package/css-loader)
  4. स्टाइल-लोडर(https://www.npmjs.com/package/style-loader)
  5. नोड-एसएएस (https://www.npmjs.com/package/node-sass)

हो सकता है कि आपको नोड-एसएएस याद आ रहा हो

0
Amaresh S M 21 जिंदा 2021, 15:56