Автор оригинала: Esau Silva.
SASS является очень популярным предварительно процессором CSS. Намерение этого учебника – показать вам, как компилировать файлы SASS в Visual Studio с помощью WebPack. Наша дискуссия будет включать в себя министерство и автоперефиксирование для производства.
Конечно, есть несколько плагинов на рынке визуальной студии, и можно приятно просто установить плагин и забыть о конфигурации. Но что произойдет, если плагин больше не поддерживается и перестает работать с новыми версиями Visual Studio? Ну, слишком плохо. Это имеет место с одним из самых популярных плагинов компилятора на рынке.
Настроив компиляцию самостоятельно, у вас будет полный контроль над выходом. Кроме того, префиксы поставщики будут добавлены автоматически к вашим правилам CSS. Как это круто?
Предпосылки
Вам нужно будет установить узел, и вы можете схватить его здесь Отказ Вот это действительно. Вам также нужна NPM, но он также будет установлен с узлом.
Создание проекта
Примечание: Мы будем создавать .NET Приложение Core MVC, но те же принципы применяются к любому приложению ASP.NET MVC. Вам просто нужно будет изменять конфигурацию WebPack, чтобы вывести файл CSS в Содержание каталог.
Откройте Visual Studio и создайте новый Веб-приложение ASP.NET Core Затем выберите Веб-приложение (модель View-Controller) Отказ Я называю свой проект Netcore-Sass-WebPack Отказ
Создать Стили папка в корне проекта. Внутри его создайте файл SASS и назовите его site.scsss . Откройте этот новый файл SASS и скопируйте следующее:
/* Please see documentation at https://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, когда мы создали проект, за исключением Фон Правило в тело ярлык. Теперь удалите предоставленные CSS, расположенные под wwwroot/css. (Оба файла: site.csss и site.min.css ). Не волнуйтесь, мы автоматически создаем их с помощью WebPack.
Теперь скачайте papter.png и поместите его под wwwroot/images Отказ
Создайте пустой файл JavaScript под корнем приложения и назовите его webpack.config.js Отказ Мы позаботимся об этом позже. Вы должны в конечном итоге со следующей структурой проекта:
Примечание: Вам не нужно делать следующие два шага для каждого проекта, только один раз (если вы не установите и переустановите Visual Studio).
Вам нужно будет предоставить Visual Studio с пути установки узла. Вернитесь к вашему проекту и выберите Инструменты -> Optio NS на левой PA NE Проекты и решения -> Веб-пакет Мана Gement и добавьте путь к установке узла в верхней части L IST (C: \ Program Files \ Узел JS или C: \ Program Files (x86) \ Nodejs, в зависимости от того, если вы установили версию X64 или X86).
Наконец скачать NPM задача Runner И установите его – но вам нужно будет закрыть Visual Studio First.
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 – Модуль Bundler.
- Узел-сасс – привязки для узла в LibSass; Обеспечивает поддержку SASS
- PostCSS-погрузчик, PostCSS-Preset-Env – PostCSS Loader для WebPack для обработки AutoPrefixing и Minificate
- Sass-Loader, CSS-погрузчик – WebPack требует определенных погрузчиков для поддержки SASS и CSS
- CSSNANO – CSS министерство
- Мини-CSS-экстракт-плагин – Извлекает CSS в отдельный файл
- кросс-эн – Обеспечивает поддержку пользователей Windows для переменных среды. Мы будем использовать переменную Node_envenvironment
- файловой погрузчик – Обеспечивает поддержку файлов (изображений) в наших правилах CSS
В этот момент вы можете восстановить проект в Visual Studio. После завершения проекта загрузка, открыть Package.json и добавьте следующие скрипты:
"scripts": {
"dev": "webpack --watch",
"build": "cross-env NODE_ENV=production webpack"
},- дев – Мы связываем этот скрипт всякий раз, когда проект открывается, и WebPack будет постоянно следить за изменениями в файлах Source SASS, компилируйте их и выводят отдельный файл CSS
- построить – Мы связываем этот скрипт перед каждым сборкой проекта и создаст файл CSS Production CSS, включая министерство и автоподъемность
Примечание: Сценарии NPM будут работать автоматически, используя Задача бегуна окно. Больше на этом позже.
Настало время работать над нашей конфигурацией 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.
// https://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 Отказ Перейдите к Просмотр -> Другие окна -> Задача Runner Exp Лорер. Окно покажет на дне, и вы увидите сценарии, которые вы создали в Package.json перечислены там под Обычай. Вы также увидите некоторые задачи При де Неисправности, но вы можете просто игнорировать их.
Нам нужны два привязки:
- Щелкните правой кнопкой мыши построить -> привязки -> до Build – Visual Studio запустит эту задачу перед каждой сборкой. Помните, что этот сценарий NPM запускает WebPack для производства и оптимизирует файл CSS.
- Щелкните правой кнопкой мыши Dev -> Привязки -> Projec T Открыть – Visual Studio запускает эту задачу, когда вы открываете проект. Помните, что этот сценарий NPM запускает WebPack в режиме часов и Будет ли Следите за любыми изменениями в файлах SASS и выведите обработанный файл CSS.
Task Runner Explorer должен выглядеть так:
Примечание: По какой-то причине Visual Studio иногда не сможет начать dev Задача при открытии проекта. Если это произойдет, просто откройте Task Explorer и запустите задачу вручную.
Вы можете получить полный код из Github Repository Отказ
Последние мысли
И это все, что есть слишком. Поскольку у вас уже есть Visual Studio Open, ни одна из задач не работает. Идти вперед и Правильно Нажмите dev Задача и выберите Run. Вы увидите загрузку задач и когда она заканчивается, вы увидите, что site.csss Файл был создан под wwwroot/css. каталог. Открыть site.scsss Сделайте изменение и сохраните его. Теперь открыть site.csss , вы увидите, что ваши изменения отражены там. Прохладный!!
Запустите свой проект, нажав Ctrl + F5 Вы увидите site.min.css Файл создан под wwwroot/css. каталог. Этот файл был создан, когда задача Runner побежал построить Сценарий до него построил проект.
Последний сайт должен выглядеть так:
Я знаю, я знаю, на заднем плане очень сырный … но мне нужно было изображение, чтобы показать WebPack файловой погрузчик в действии.
С этой конфигурацией вы даже можете добавить поддержку Transpile Modern JavaScript (ES6 +) до ES5. Посмотрите на них: @ Babel/Core , Babel-Loader , @ babel/preset-env Отказ
Спасибо за чтение, и я надеюсь, что вам понравилось. Если у вас есть какие-либо вопросы, предложения или исправления, дайте мне знать в комментариях ниже. Не забудьте дать эту статью долю, и вы можете следовать за мной на Twitter , Github , Средний , LinkedIn Отказ
Вы также можете посетить мой личный Место для блога Отказ
Обновление 8/25/19: Я создал молитвенное веб-приложение под названием « Мое тихое время – молитвенный журнал “. Если вы хотите остаться в цикле, пожалуйста, зарегистрируйтесь по следующей ссылке: http://b.link/mqt
Приложение будет выпущено до конца года, у меня есть большие планы для этого приложения. Чтобы увидеть несколько скриншотов макета, следуйте следующей ссылке: http://pc.cd/lpy7.
Мой DMS на Twitter Открыты, если у вас есть какие-либо вопросы относительно приложения?
Оригинал: “https://www.freecodecamp.org/news/how-to-compile-sass-files-in-visual-studio-and-webpack-6e45cdc1c14c/”