تحويل ملفات sass الى css

Najah Alsaker · 30 أغسطس 2021

لقد قمت بتثبيت حزمة sass-loader وادارجها الى ملف index.js عبر الامر التالي

import './scss/product1.scss';

بالاضافة الى انني اضفت الاضافة الى ملف webpack.config.js عبر الاوامر التالية

        test: /\.(sa|sc|c)ss$/,
        use: [
        {
        loader: MiniCssExtractPulgin.loader,
        options:{
            publicPath: '../'
        }
        },
        'css-loader' , 'sass-loader'
             ]
                     
        },

ولايوجد اي خطا في الترمينال ولكن عندما اريد تحويل الملف من scss الى css يظهر لدي الخطا التالي ولا يتم انشاء الملف داخل dist

Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation.  All rights reserved.

C:\coffee>sass src/scss/product1.scss src/css/product1.css
'sass' is not recognized as an internal or external command,
operable program or batch file.

C:\coffee>

محمد أبو عواد · 30 أغسطس 2021

حاولي اغلاق cmd واعيدي تشغيله كمسؤول , ثم نفذي الأمر مرة أخرى واخبريني بالنتيحة

بلال زيادة · 30 أغسطس 2021

يمكنك تثبيت الحزمة التالية من خلال الأمر التالي

npm install -g node-sass

ثم يمكنك إعادة تشغيل المشروع من خلال الأمر التالي

npm run build

ايضا يمكنك محاولة حذف الكاش من خلال الأمر التالي

npm cache clean --force

ثم تجربة تنفيذ الأمر السابق في الأول لتقوم بتثبيت الحزمة من جديد.

Najah Alsaker · 30 أغسطس 2021

اعدت تشغيله اكثر من مرة ولكن هل تقصد بمسؤول اي فتحه من داخل الملفات عبر كتابة cmd مكان مسار المشروع

بلال زيادة · 30 أغسطس 2021

بتاريخ 5 دقائق مضت قال Najah Alsaker:

اعدت تشغيله اكثر من مرة ولكن هل تقصد بمسؤول اي فتحه من داخل الملفات عبر كتابة cmd مكان مسار المشروع

يمكنك تشغيل cmd كمسؤول من خلال الضغط على أبدأ ثم تكتبي cmd ثم تضغطي على تشغيل كمسؤول.

Najah Alsaker · 30 أغسطس 2021

بتاريخ 10 دقائق مضت قال بلال زيادة:
يمكنك تثبيت الحزمة التالية من خلال الأمر التالي
npm install -g node-sass
ثم يمكنك إعادة تشغيل المشروع من خلال الأمر التالي
npm run build
ايضا يمكنك محاولة حذف الكاش من خلال الأمر التالي
npm cache clean --force
ثم تجربة تنفيذ الأمر السابق في الأول لتقوم بتثبيت الحزمة من جديد.

لا تعمل هذه الاوامر ولكنني قمت بتنزيل sass-loader فلماذا يجب تنزيل هذا

Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation.  All rights reserved.

C:\coffee>sass src/scss/product1.scss src/css/product1.css
'sass' is not recognized as an internal or external command,
operable program or batch file.

C:\coffee>npm install -g node-sass
npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/node-
sass (over 30000ms)

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\len\AppData\Roaming\npm-cache\_logs\2021-08-30T16_02_25_30
6Z-debug.log

C:\coffee>npm install -d  node-sass
npm info it worked if it ends with ok
npm info using npm@6.14.4
npm info using node@v13.14.0
npm http fetch GET 200 https://registry.npmjs.org/node-sass 18730ms
npm http fetch GET 200 https://registry.npmjs.org/node-sass/-/node-sass-6.0.1.tg
z 66807ms
npm timing stage:loadCurrentTree Completed in 90523ms
npm timing stage:loadIdealTree:cloneCurrentTree Completed in 27ms
npm timing stage:loadIdealTree:loadShrinkwrap Completed in 2640ms
npm http fetch GET 200 https://registry.npmjs.org/get-stdin 1722ms
npm http fetch GET 200 https://registry.npmjs.org/async-foreach 1974ms
npm http fetch GET 200 https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tg
z 606ms
npm http fetch GET 200 https://registry.npmjs.org/async-foreach/-/async-foreach-
0.1.3.tgz 1803ms
npm http fetch GET 200 https://registry.npmjs.org/stdout-stream 4007ms
npm http fetch GET 200 https://registry.npmjs.org/stdout-stream/-/stdout-stream-
1.4.1.tgz 1314ms
npm http fetch GET 200 https://registry.npmjs.org/node-gyp 8803ms
npm http fetch GET 200 https://registry.npmjs.org/gaze 11643ms
npm http fetch GET 200 https://registry.npmjs.org/sass-graph 14347ms
npm http fetch GET 200 https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz 2940ms
npm http fetch GET 200 https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.
tgz 897ms
npm http fetch GET 200 https://registry.npmjs.org/true-case-path 21634ms
npm http fetch GET 200 https://registry.npmjs.org/npmlog 43334ms attempt #2
npm http fetch GET 200 https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz 247m
s
npm http fetch GET 200 https://registry.npmjs.org/node-gyp/-/node-gyp-7.1.2.tgz
109484ms
npm timing npm Completed in 213096ms
npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR!     <https://npm.community>

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\len\AppData\Roaming\npm-cache\_logs\2021-08-30T16_06_53_33
4Z-debug.log

C:\coffee>

بلال زيادة · 30 أغسطس 2021

بتاريخ 1 دقيقة مضت قال Najah Alsaker:

لا تعمل هذه الاوامر ولكنني قمت بتنزيل sass-loader فلماذا يجب تنزيل هذا


Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation.  All rights reserved.

C:\coffee>sass src/scss/product1.scss src/css/product1.css
'sass' is not recognized as an internal or external command,
operable program or batch file.

C:\coffee>npm install -g node-sass
npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/node-
sass (over 30000ms)

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\len\AppData\Roaming\npm-cache\_logs\2021-08-30T16_02_25_30
6Z-debug.log

C:\coffee>npm install -d  node-sass
npm info it worked if it ends with ok
npm info using npm@6.14.4
npm info using node@v13.14.0
npm http fetch GET 200 https://registry.npmjs.org/node-sass 18730ms
npm http fetch GET 200 https://registry.npmjs.org/node-sass/-/node-sass-6.0.1.tg
z 66807ms
npm timing stage:loadCurrentTree Completed in 90523ms
npm timing stage:loadIdealTree:cloneCurrentTree Completed in 27ms
npm timing stage:loadIdealTree:loadShrinkwrap Completed in 2640ms
npm http fetch GET 200 https://registry.npmjs.org/get-stdin 1722ms
npm http fetch GET 200 https://registry.npmjs.org/async-foreach 1974ms
npm http fetch GET 200 https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tg
z 606ms
npm http fetch GET 200 https://registry.npmjs.org/async-foreach/-/async-foreach-
0.1.3.tgz 1803ms
npm http fetch GET 200 https://registry.npmjs.org/stdout-stream 4007ms
npm http fetch GET 200 https://registry.npmjs.org/stdout-stream/-/stdout-stream-
1.4.1.tgz 1314ms
npm http fetch GET 200 https://registry.npmjs.org/node-gyp 8803ms
npm http fetch GET 200 https://registry.npmjs.org/gaze 11643ms
npm http fetch GET 200 https://registry.npmjs.org/sass-graph 14347ms
npm http fetch GET 200 https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz 2940ms
npm http fetch GET 200 https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.
tgz 897ms
npm http fetch GET 200 https://registry.npmjs.org/true-case-path 21634ms
npm http fetch GET 200 https://registry.npmjs.org/npmlog 43334ms attempt #2
npm http fetch GET 200 https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz 247m
s
npm http fetch GET 200 https://registry.npmjs.org/node-gyp/-/node-gyp-7.1.2.tgz
109484ms
npm timing npm Completed in 213096ms
npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR!     <https://npm.community>

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\len\AppData\Roaming\npm-cache\_logs\2021-08-30T16_06_53_33
4Z-debug.log

C:\coffee>

هل يمكنك وضع صورة لكيف تقومين بتنفيذ الأوامر

Najah Alsaker · 30 أغسطس 2021

بتاريخ 5 دقائق مضت قال بلال زيادة:

هل يمكنك وضع صورة لكيف تقومين بتنفيذ الأوامر

الصورة الأولى عند تنفيذ الأمر الاذي أعطيتني ياه

بينما الصورة الثانية هي عندما اريد تحويل الملفات من scssالى css

بلال زيادة · 30 أغسطس 2021

بتاريخ 6 دقائق مضت قال Najah Alsaker:

الصورة الأولى عند تنفيذ الأمر الاذي أعطيتني ياه

بينما الصورة الثانية هي عندما اريد تحويل الملفات من scssالى css

يبدو أنكِ لم تثبتين المكتبة المناسبة لذلك حاول رجاء تثبيت المكتبة التالية من خلال الأمر التالي

npm install -g sass

ثم تقومين بإغلاق CMD و من ثم فتحه مرة أخرى و من ثم تقومين بكتابة الكود الخاص بتحويل Scss إلى css.

Najah Alsaker · 30 أغسطس 2021

بتاريخ 38 دقائق مضت قال بلال زيادة:
يبدو أنكِ لم تثبتين المكتبة المناسبة لذلك حاول رجاء تثبيت المكتبة التالية من خلال الأمر التالي
npm install -g sass
ثم تقومين بإغلاق CMD و من ثم فتحه مرة أخرى و من ثم تقومين بكتابة الكود الخاص بتحويل Scss إلى css.

امر التثبيت خاصتك لا يعمل وبالرغم من ذلك اغلقته وأعدت كتابة شيفرة التحويل من scssالى css ولم تعمل بقيت كالخطأ السابق

بتاريخ 38 دقائق مضت قال بلال زيادة:
يبدو أنكِ لم تثبتين المكتبة المناسبة لذلك حاول رجاء تثبيت المكتبة التالية من خلال الأمر التالي
npm install -g sass
ثم تقومين بإغلاق CMD و من ثم فتحه مرة أخرى و من ثم تقومين بكتابة الكود الخاص بتحويل Scss إلى css.

امر التثبيت خاصتك لا يعمل وبالرغم من ذلك اغلقته وأعدت كتابة شيفرة التحويل من scssالى css ولم تعمل بقيت كالخطأ السابق

بلال زيادة · 30 أغسطس 2021

بتاريخ 14 دقائق مضت قال Najah Alsaker:

امر التثبيت خاصتك لا يعمل وبالرغم من ذلك اغلقته وأعدت كتابة شيفرة التحويل من scssالى css ولم تعمل بقيت كالخطأ السابق

امر التثبيت خاصتك لا يعمل وبالرغم من ذلك اغلقته وأعدت كتابة شيفرة التحويل من scssالى css ولم تعمل بقيت كالخطأ السابق

هل يمكنك إرفاق ملفات مشروعك بشكلٍ مضغوط لأنه لن استطيع تفقد المشكلة من خلال الأكواد أو الصور.

سمير عبود · 30 أغسطس 2021

بتاريخ 32 دقائق مضت قال Najah Alsaker:

امر التثبيت خاصتك لا يعمل وبالرغم من ذلك اغلقته وأعدت كتابة شيفرة التحويل من scssالى css ولم تعمل بقيت كالخطأ السابق

يبدو أن المُشكلة الأساسية لديك ليست في أمر تحويل ملفات scss و إنما المُشكلة هي في عدم تثبيت sass بشكل صحيح.

يُمكنك إضافة العلم force-- لأمر التثبيت بهذا الشكل:

npm i -g --force sass

بعد ذلك تأكدي من تثبيت sass بتفقد الإصدار:

sass --version

من المفروض يتم طباعة الإصدار المُثبت. أعلمينا بالنتائج.

Najah Alsaker · 30 أغسطس 2021

بتاريخ 6 دقائق مضت قال عبود سمير:
يبدو أن المُشكلة الأساسية لديك ليست في أمر تحويل ملفات scss و إنما المُشكلة هي في عدم تثبيت sass بشكل صحيح.

يُمكنك إضافة العلم force-- لأمر التثبيت بهذا الشكل:
npm i -g --force sass
بعد ذلك تأكدي من تثبيت sass بتفقد الإصدار:
sass --version
من المفروض يتم طباعة الإصدار المُثبت. أعلمينا بالنتائج.

شكرت لك ولكن المشكلة عند ما اقوم بتنزيل الحزمة يظهر لي خطا ولا تتنزل

C:\coffee>npm i -g --force sass
npm WARN using --force I sure hope you know what you are doing.
npm ERR! code EEXIST
npm ERR! path C:\Users\len\AppData\Roaming\npm\sass.ps1
npm ERR! Refusing to delete C:\Users\len\AppData\Roaming\npm\sass.ps1: node_modu
les/sass/sass.js symlink target is not controlled by npm C:\Users\len\AppData\Ro
aming\npm\node_modules\sass
npm ERR! File exists: C:\Users\len\AppData\Roaming\npm\sass.ps1
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\len\AppData\Roaming\npm-cache\_logs\2021-08-30T17_54_19_26
9Z-debug.log

C:\coffee>sass --version
'sass' is not recognized as an internal or external command,
operable program or batch file.

C:\coffee>

سمير عبود · 30 أغسطس 2021

بتاريخ 17 دقائق مضت قال Najah Alsaker:

شكرت لك ولكن المشكلة عند ما اقوم بتنزيل الحزمة يظهر لي خطا ولا تتنزل

Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation. All rights reserved.

C:\coffee>npm i -g --force sass
npm WARN using --force I sure hope you know what you are doing.
npm ERR! code EEXIST
npm ERR! path C:\Users\len\AppData\Roaming\npm\sass.ps1
npm ERR! Refusing to delete C:\Users\len\AppData\Roaming\npm\sass.ps1: node_modu
les/sass/sass.js symlink target is not controlled by npm C:\Users\len\AppData\Ro
aming\npm\node_modules\sass
npm ERR! File exists: C:\Users\len\AppData\Roaming\npm\sass.ps1
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\len\AppData\Roaming\npm-cache\_logs\2021-08-30T17_54_19_26
9Z-debug.log

C:\coffee>sass --version
'sass' is not recognized as an internal or external command,
operable program or batch file.

C:\coffee>

طيب حاولي الذهاب إلى المسار C:\Users\len\AppData\Roaming\npm و حذف كل الملفات المُتعلقة ب sass ثم الذهاب إلى المسار C:\Users\len\AppData\Roaming\npm\node_modules و حذف مجلد sass إن وُجد بعد ذلك حاولي تشغيل cmd بصلاحيات مسؤول ثم تنفيذ الأوامر السابقة. حالياً المُشكلة الأساسية في تثبيت sass نفسها فلا تُفكري في أمر التحويل بعد الإنتهاء من تثبيت sass يُمكنك الإنتقال إلى التحويل.

تحويل ملفات sass الى css

السؤال

Najah Alsaker

13 أجوبة على هذا السؤال

Recommended Posts

محمد أبو عواد

بلال زيادة

Najah Alsaker

بلال زيادة

Najah Alsaker

بلال زيادة

Najah Alsaker

بلال زيادة

Najah Alsaker

بلال زيادة

سمير عبود

Najah Alsaker

سمير عبود

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية