Как собрать файлы Sass в Visual Studio и Webpack

1656544818 kak sobrat fajly sass v visual studio i webpack

Sass – очень популярный препроцессор CSS. Цель этого руководства – показать вам, как компилировать файлы Sass в Visual Studio с помощью Webpack. Наше обсуждение будет включать в себя минификацию и автопрефикс для производства.

3k12b5dvlT4iN20sLPdB9W064Z6R7tSYIuX7
Visual Studio встречает Sass

Конечно, на Visual Studio Marketplace есть некоторые плагины, и было бы хорошо просто установить плагин и забыть о конфигурации. Но что произойдет, если плагин больше не поддерживается и перестанет работать с более новыми версиями Visual Studio? Ну очень плохо. Это касается одного из самых популярных плагинов компилятора на рынке.

Настроив компиляцию самостоятельно, вы будете иметь полный контроль над выводом. Кроме того, префиксы поставщиков будут автоматически добавлены в ваши правила CSS. Как это круто?

Предпосылки

Вам нужно установить Node и вы можете получить его здесь. Это действительно. Вам также понадобится npm, но он также будет установлен вместе с Node.

Создание проекта

Примечание: Мы будем создавать программу .NET Core MVC, но те же принципы применяются к любой программе ASP.NET MVC. Вам просто нужно немного изменить конфигурацию Webpack, чтобы вывести файл CSS в файл Content каталог.

Откройте Visual Studio и создайте новый Веб-приложение ASP.NET Coreзатем выберите Веб-приложение (модель-просмотр-контроллер). Я называю свой проект netcore-sass-webpack.

aiZk0QmUZvH0pLbYz4NJQDjsubLYGjSu3D7S
Создание проекта

Создать Styles папку в корне проекта. Внутри него создайте файл Sass и назовите его site.scss. Откройте этот новый файл Sass и скопируйте следующее:

/* Please see documentation at  
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. Мы позаботимся об этом позже. В итоге вы должны получить следующую структуру проекта:

jLrFCNq5AeHVD47jJDIveoOzJgDw6zkryxt3
Структура проекта

Примечание: Вам не нужно выполнять следующие два шага для каждого проекта только один раз (если вы не удалили и не установили Visual Studio).

Вам нужно будет предоставить Visual Studio путь установки Node. Вернитесь в свой проект и выберите Инструменты -> Optioнс на левой паne Проекты и решения -> Веб-пакет Management и добавьте путь к установке Node в верхней части list ( C:\Program Files\узелjs or C:\Program Files (x86)\nodejs, в зависимости от того, установлена ​​версия x64 или x86).

J8sJYylsXyYm2gZ2V3Nma4bvABRfJdefnldJ
Путь узла

Наконец-то загрузите 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 — Привязки Node к LibSass; обеспечивает поддержку Sass
  • postcss-loader, postcss-preset-env — Загрузчик PostCSS для Webpack для обработки автопрефикса и минификации
  • sass-loader, css-loader — Webpack нуждается в специальных загрузчиках для поддержки Sass и CSS
  • cssnano — Минификатор CSS
  • мини-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"
  },
  • разв — Мы будем привязывать этот сценарий всякий раз, когда проект открывается, и Webpack будет постоянно следить за изменениями исходных файлов Sass, компилировать их и выводить отдельный CSS
  • строить — Мы будем привязывать этот скрипт перед каждой сборкой проекта и создавать рабочий файл 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.
                      // 
                      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. Перейдите к Просмотр -> Другие Windows -> Task Runner Expлорер. Внизу появится окно, и вы увидите созданные вами скрипты package.json перечислены там под Под заказ. Вы также увидите несколько задач под Гденедостатки, но вы можете просто игнорировать их.

Нам нужны две привязки:

  • Щелкните правой кнопкой мыши build -> Привязки -> Раньше Сборка — Visual Studio запускает эту задачу перед каждой сборкой. Помните, что скрипт npm запускает Webpack для производства и оптимизирует файл CSS.
  • Щелкните правой кнопкой мыши dev -> Привязки -> Проектt Открыть — Visual Studio запустит эту задачу при открытии проекта. Помните, что этот скрипт npm запускает Webpack в режиме просмотра и будет наблюдайте за любыми изменениями в файлах Sass и выведите обработанный файл CSS.

Task Runner Explorer должно выглядеть так:

cEQsi3RjNiBTTQr1tAhSoAARAmhkc79kQRza
Task Runner Explorer

Примечание: Почему-то Visual Studio иногда не запускается разв задачи при открытии проекта Если это произойдет, просто откройте проводник задач и запустите задание вручную.

Вы можете получить полный код из хранилища GitHub.

Последние мнения

И все это тоже есть. Поскольку Visual Studio уже открыта, ни одна из задач не выполняется. Давай и щелкните правой кнопкой мыши в разв и выберите запуск. Вы увидите, как задание загружается, а когда оно закончится, вы увидите, что a site.css файл создан под wwwroot/css каталог. ОТКРЫТО site.scss, измените и сохраните их. Теперь откройте site.css, там отобразится ваше изменение. Круто!!

Запустите проект, нажав Ctrl+F5вы увидите a site.min.css файл, созданный под wwwroot/css каталог. Этот файл был создан в приложении Task Runner побег в build сценарий перед созданием проекта

Конечный сайт должен выглядеть так:

CBTg3rcS670jv5PSQzM35LZ9awQdUfzS2Nb3
Конечный сайт

Я знаю, я знаю, фон очень творожный… но мне нужно было изображение, чтобы показать Webpack file-loader в действии.

С этой конфигурацией вы даже можете добавить поддержку для переноса современного JavaScript (ES6+) на ES5. Посмотрите на эти: @babel/core, babel-loader, @babel/preset-env.

Спасибо, что прочли, и я надеюсь, что вам понравилось. Если у вас есть вопросы, предложения или исправления, сообщите мне в комментариях ниже. Не забудьте поделиться этой статьей, и вы можете подписаться на меня в Twitter, GitHub, Medium, LinkedIn.

Вы также можете посетить мой личный сайт для ведения блога.

Обновление 25.08.19: Я создал веб-приложение для молитвы под названиемМое тихое время — Молитвенный журналЕсли вы хотите оставаться в курсе, зарегистрируйтесь по этой ссылке:

Приложение выйдет до конца года, у меня большие планы по этому приложению. Чтобы увидеть некоторые скриншоты макетов, перейдите по следующей ссылке: http://pc.cd/Lpy7

Мои DM в Twitter открыты, если у вас есть вопросы по программе?

Добавить комментарий

Ваш адрес email не будет опубликован.