كيفية تجميع ملفات Sass في Visual Studio و Webpack

Sass هو معالج مسبق CSS شائع جدًا. الهدف من هذا البرنامج التعليمي هو توضيح كيفية تجميع ملفات Sass داخل Visual Studio باستخدام Webpack. ستشمل مناقشتنا التصغير والإصلاح التلقائي للإنتاج.

بالتأكيد ، هناك بعض المكونات الإضافية في Visual Studio Marketplace ، وقد يكون من الجيد فقط تثبيت مكون إضافي ونسيان التكوين. ولكن ماذا يحدث إذا لم يعد المكون الإضافي مدعومًا وتوقف عن العمل مع إصدارات Visual Studio الأحدث؟ حسنًا ، سيء جدًا. هذا هو الحال مع أحد أشهر المكونات الإضافية للمترجم في السوق.

من خلال تكوين التجميع بنفسك ، سيكون لديك سيطرة كاملة على الإخراج. أيضًا ، ستتم إضافة بادئات البائع تلقائيًا إلى قواعد CSS الخاصة بك. كم ذلك رائع؟

المتطلبات الأساسية

ستحتاج إلى تثبيت Node ، ويمكنك الحصول عليه هنا. هذا كل شيء حقًا. ستحتاج أيضًا إلى npm ، ولكن سيتم تثبيته أيضًا مع Node.

خلق المشروع

ملاحظة: سننشئ تطبيق .NET Core MVC ، لكن نفس المبادئ تنطبق على أي تطبيق ASP.NET MVC. ستحتاج فقط إلى تعديل تكوين Webpack قليلاً لإخراج ملف CSS إلى Contentالدليل.

افتح Visual Studio وأنشئ تطبيق ويب ASP.NET Core جديدًا ، ثم حدد تطبيق الويب (Model-View-Controller) . أقوم بتسمية مشروعي netcore-sass-webpack .

قم بإنشاء Stylesمجلد داخل جذر المشروع. بداخله ، قم بإنشاء ملف Sass وقم بتسميته site.scss. افتح ملف Sass الجديد وانسخ ما يلي:

/* Please see documentation at //docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ for details on configuring this project to bundle and minify static web assets. */ body { padding-top: 50px; padding-bottom: 20px; background: #D69655 url('../wwwroot/images/pattern.png') repeat; } /* Wrapping element */ /* Set some basic padding to keep content from hitting the edges */ .body-content { padding-left: 15px; padding-right: 15px; } /* Carousel */ .carousel-caption p { font-size: 20px; line-height: 1.4; } /* Make .svg files in the carousel display properly in older browsers */ .carousel-inner .item img[src$=".svg"] { width: 100%; } /* QR code generator */ #qrCode { margin: 15px; } /* Hide/rearrange for smaller screens */ @media screen and (max-width: 767px) { /* Hide captions */ .carousel-caption { display: none; } }

ستلاحظ أن هذا هو نفس CSS الذي قدمه Visual Studio عندما أنشأنا المشروع ، باستثناء backgroundالقاعدة في bodyالعلامة. الآن احذف CSS المتوفر الموجود أسفل wwwroot/css(كلا الملفين: site.cssو site.min.css). لا تقلق ، سنقوم بإنشاء هذه تلقائيًا باستخدام Webpack.

الآن ، قم بتنزيل pattern.png وضعه أسفل wwwroot/images.

أنشئ ملف JavaScript فارغًا تحت جذر التطبيق وقم بتسميته webpack.config.js. سوف نعتني بهذا لاحقًا. يجب أن ينتهي بك الأمر مع هيكل المشروع التالي:

ملاحظة: لست بحاجة إلى القيام بالخطوتين التاليتين لكل مشروع ، مرة واحدة فقط (إلا إذا قمت بإلغاء تثبيت Visual Studio وإعادة تثبيته).

ستحتاج إلى تزويد Visual Studio بمسار تثبيت العقدة. ارجع إلى مشروعك وحدد أدوات -> Optio ns على اليسار في المشاريع والحلول -> Web Package Mana gement وأضف المسار إلى تثبيت Node في الجزء العلوي من l ist ( C:\Program Files\node js or C:\Program Files (x86)\nodejs ، اعتمادًا على ما إذا كنت قد قمت بتثبيت x64 أو x86 الإصدار).

أخيرًا قم بتنزيل NPM Task Runner وتثبيته - لكنك ستحتاج إلى إغلاق Visual Studio أولاً.

تبعيات Webpack و NPM

افتح موجه الأوامر وانتقل إلى جذر المشروع وقم بتثبيت التبعيات المطلوبة:

cd netcore-sass-webpack\netcore-sass-webpack npm init -y npm i -D webpack webpack-cli node-sass postcss-loader postcss-preset-env sass-loader css-loader cssnano mini-css-extract-plugin cross-env file-loader

يقوم npmالأمر الأول بتهيئة الخاص بك package.jsonوالثاني يقوم بتثبيت تبعياتك.

  • webpack ، webpack-cli - وحدة تجميع الوحدة النمطية
  • node-sass - روابط العقدة بـ LibSass ؛ يوفر الدعم لـ Sass
  • postcss-loader ، postcss-preset-env - محمل PostCSS لـ Webpack لمعالجة التجديد التلقائي والتقليل
  • sass-loader ، css-loader - يحتاج Webpack إلى لوادر محددة لدعم Sass و CSS
  • cssnano - مصغر CSS
  • mini-css-extract-plugin - لاستخراج CSS إلى ملف منفصل
  • cross-env - يوفر الدعم لمستخدمي Windows لمتغيرات البيئة. سوف نستخدم NODE_ENVenvironment متغير
  • أداة تحميل الملفات - توفر الدعم للملفات (الصور) في قواعد CSS الخاصة بنا

في هذه المرحلة ، يمكنك إعادة فتح المشروع في Visual Studio. بعد انتهاء تحميل المشروع ، افتح package.jsonوأضف البرامج النصية التالية:

"scripts": { "dev": "webpack --watch", "build": "cross-env NODE_ENV=production webpack" },
  • dev - سنقوم بربط هذا البرنامج النصي عند فتح المشروع ، وسيراقب Webpack باستمرار التغييرات التي تطرأ على ملفات Sass المصدر وتجميعها وإخراج ملف CSS المنفصل
  • build - سنقوم بربط هذا البرنامج النصي قبل كل بناء مشروع وسننتج ملف CSS للإنتاج ، بما في ذلك التصغير والإصلاح التلقائي

ملاحظة: سيتم تشغيل البرامج النصية NPM تلقائيًا باستخدام نافذة Task Runner . المزيد عن ذلك لاحقًا.

حان الوقت للعمل على تكوين Webpack الخاص بنا. افتح webpack.config.jsوانسخ ما يلي:

const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const postcssPresetEnv = require("postcss-preset-env"); // We are getting 'process.env.NODE_ENV' from the NPM scripts // Remember the 'dev' script? const devMode = process.env.NODE_ENV !== "production"; module.exports = { // Tells Webpack which built-in optimizations to use // If you leave this out, Webpack will default to 'production' mode: devMode ? "development" : "production", // Webpack needs to know where to start the bundling process, // so we define the Sass file under './Styles' directory entry: ["./Styles/site.scss"], // This is where we define the path where Webpack will place // a bundled JS file. Webpack needs to produce this file, // but for our purposes you can ignore it output: { path: path.resolve(__dirname, "wwwroot"), // Specify the base path for all the styles within your // application. This is relative to the output path, so in // our case it will be './wwwroot/css' publicPath: "/css", // The name of the output bundle. Path is also relative // to the output path, so './wwwroot/js' filename: "js/sass.js" }, module: { // Array of rules that tells Webpack how the modules (output) // will be created rules: [ { // Look for Sass files and process them according to the // rules specified in the different loaders test: /\.(sa|sc)ss$/, // Use the following loaders from right-to-left, so it will // use sass-loader first and ending with MiniCssExtractPlugin use: [ { // Extracts the CSS into a separate file and uses the // defined configurations in the 'plugins' section loader: MiniCssExtractPlugin.loader }, { // Interprets CSS loader: "css-loader", options: { importLoaders: 2 } }, { // Use PostCSS to minify and autoprefix with vendor rules // for older browser compatibility loader: "postcss-loader", options: { ident: "postcss", // We instruct PostCSS to autoprefix and minimize our // CSS when in production mode, otherwise don't do // anything. plugins: devMode ? () => [] : () => [ postcssPresetEnv({ // Compile our CSS code to support browsers // that are used in more than 1% of the // global market browser share. You can modify // the target browsers according to your needs // by using supported queries. // //github.com/browserslist/browserslist#queries browsers: [">1%"] }), require("cssnano")() ] } }, { // Adds support for Sass files, if using Less, then // use the less-loader loader: "sass-loader" } ] }, { // Adds support to load images in your CSS rules. It looks for // .png, .jpg, .jpeg and .gif test: /\.(png|jpe?g|gif)$/, use: [ { loader: "file-loader", options: { // The image will be named with the original name and // extension name: "[name].[ext]", // Indicates where the images are stored and will use // this path when generating the CSS files. // Example, in site.scss I have // url('../wwwroot/images/pattern.png') and when generating // the CSS file, file-loader will output as // url(../images/pattern.png), which is relative // to '/css/site.css' publicPath: "../images", // When this option is 'true', the loader will emit the // image to output.path emitFile: false } } ] } ] }, plugins: [ // Configuration options for MiniCssExtractPlugin. Here I'm only // indicating what the CSS output file name should be and // the location new MiniCssExtractPlugin({ filename: devMode ? "css/site.css" : "css/site.min.css" }) ] };

الرجوع إلى التعليقات في التعليمات البرمجية لفهم التكوين. (ملف أكثر قابلية للقراءة هنا.)

نحتاج الآن إلى إنشاء بعض الروابط في Task Runner Explorer . انتقل إلى View -> Other Windows -> Task Runner Exp lorer. ستظهر النافذة في الأسفل وسترى البرامج النصية التي أنشأتها package.jsonمدرجة هناك تحت Custom. سترى أيضًا بعض المهام ضمن أخطاء De ، ولكن يمكنك تجاهلها فقط.

نحتاج إلى ارتباطين:

  • انقر بزر الماوس الأيمن فوق إنشاء -> روابط -> قبل الإنشاء - سيقوم Visual Studio بتشغيل هذه المهمة قبل كل بناء. تذكر أن هذا البرنامج النصي npm يقوم بتشغيل Webpack للإنتاج وسيحسن ملف CSS.
  • انقر بزر الماوس الأيمن على dev -> Bindings -> Projec t Open - سيقوم Visual Studio بتشغيل هذه المهمة عند فتح المشروع. تذكر هذا السيناريو الآلية الوقائية الوطنية يعمل Webpack في وضع ساعة و سوف يراقب عن أي تغييرات في الملفات ساس والناتج ملف CSS معالجتها.

يجب أن يبدو Task Runner Explorer كما يلي:

ملاحظة: لسبب ما ، يفشل Visual Studio أحيانًا في بدء مهمة dev عند فتح المشروع. إذا حدث ذلك ، فقط افتح مستكشف المهام وقم بتشغيل المهمة يدويًا.

يمكنك الحصول على الكود الكامل من مستودع جيثب.

افكار اخيرة

وهذا كل ما في الأمر. نظرًا لأن برنامج Visual Studio مفتوح بالفعل ، فلن يتم تشغيل أي من المهام. انطلق وانقر بزر الماوس الأيمن على مهمة dev وحدد تشغيل. سترى تحميل المهمة وعندما تنتهي سترى أن site.cssالملف قد تم إنشاؤه ضمن wwwroot/cssالدليل. افتح site.scssوقم بإجراء تغيير واحفظه. الآن مفتوح site.css، سترى التغيير الخاص بك ينعكس هناك. رائع!!

قم بتشغيل مشروعك بالضغط على Ctrl + F5 ، سترى site.min.cssملفًا تم إنشاؤه ضمن wwwroot/cssالدليل. تم إنشاء هذا الملف عند عداء العمل ركض على buildالسيناريو قبل أن بناء المشروع.

يجب أن يبدو الموقع النهائي كما يلي:

أعلم ، أعلم ، الخلفية جبنة جدًا ... لكنني كنت بحاجة إلى صورة لإظهار Webpack file-loaderأثناء العمل.

باستخدام هذا التكوين ، يمكنك حتى إضافة دعم لتحويل JavaScript الحديث (ES6 +) إلى ES5. انظر إلى هذه: @babel/core، babel-loader، @babel/preset-env.

شكرا على القراءة ، وآمل أن تكون قد استمتعت بها. إذا كان لديك أي أسئلة أو اقتراحات أو تصحيحات ، فأعلمني بذلك في التعليقات أدناه. لا تنسَ مشاركة هذه المقالة ، ويمكنك متابعتي على Twitter و GitHub و Medium و LinkedIn.

يمكنك أيضا زيارة موقع التدوين الشخصي الخاص بي.

تحديث 8/25/19: لقد كنت أقوم بإنشاء تطبيق ويب للصلاة يسمى " My Quiet Time - A Prayer Journal ". إذا كنت ترغب في البقاء في الحلقة ، يرجى التسجيل من خلال الرابط التالي: //b.link/mqt  

سيصدر التطبيق قبل نهاية العام ، لدي خطط كبيرة لهذا التطبيق. لمشاهدة بعض لقطات الشاشة بالحجم الطبيعي ، اتبع الرابط التالي: //pc.cd/Lpy7

الرسائل المباشرة الخاصة بي على Twitter مفتوحة إذا كان لديك أي أسئلة بخصوص التطبيق؟