Webpack + Бэм + Sass переменные и миксины. Как собрать проект?

Для сборки проекта, использующего Webpack, БЭМ и Sass переменные и миксины, вам понадобятся некоторые настройки и инструменты.

Давайте разберемся с каждым из них по отдельности:

1. Webpack: Webpack является сборщиком модулей, который позволяет объединить все файлы вашего проекта в один или несколько бандлов, для более эффективной загрузки браузером.

Вам понадобится установить Webpack с помощью npm или yarn:

npm install webpack --save-dev

Или

yarn add webpack --dev

2. БЭМ: БЭМ (Блок-Элемент-Модификатор) - это методология разработки, которая помогает организовать и структурировать ваш CSS.

Для использования БЭМ в вашем проекте, можно использовать специальную библиотеку, такую как "postcss-bem":

npm install postcss postcss-bem --save-dev

Или

yarn add postcss postcss-bem --dev

3. Sass переменные и миксины: Sass - это препроцессор CSS, который добавляет дополнительные возможности к стандартному CSS, включая переменные и миксины.

Для использования Sass вместе с Webpack, вам понадобится установить два пакета: sass-loader и node-sass:

npm install sass-loader node-sass --save-dev

Или

yarn add sass-loader node-sass --dev

4. Настройка Webpack: После установки необходимых пакетов, вам понадобится настроить Webpack для сборки вашего проекта.

Создайте файл webpack.config.js в корневой папке вашего проекта и добавьте следующий код:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
          'postcss-loader',
        ],
      },
    ],
  },
};

Это базовая конфигурация Webpack, которая указывает Webpack, как обрабатывать файлы SCSS и привязывать их к бандлу.

5. Настройка PostCSS для БЭМ: Вам понадобится создать файл postcss.config.js в корневой папке проекта и добавить следующий код:

module.exports = {
  plugins: [
    require('postcss-bem')({
      style: 'bem',
    }),
  ],
};

6. Создание папки и файлов проекта: Создайте папку src в корневой папке вашего проекта. Внутри папки src создайте файл index.js для JavaScript кода и файл style.scss для стилей.

7. Использование БЭМ, Sass переменных и миксинов: Теперь вы можете использовать БЭМ, Sass переменные и миксины в файле style.scss.

8. Сборка проекта: Чтобы собрать проект, вам необходимо запустить Webpack, используя следующую команду:

webpack

Или если вы добавили команду сборки в package.json, вы можете использовать:

npm run build

Или

yarn build

Webpack обработает все зависимости, скомпилирует SCSS в CSS, применит БЭМ к CSS-классам и создаст бандл JavaScript и CSS файлов, которые будут размещены в папке dist.

Теперь вы можете использовать полученные файлы в вашем проекте.

Это лишь базовая настройка Webpack, БЭМ и Sass в проекте. Вы можете настроить их дополнительно в соответствии со своими потребностями.