Как использовать SASS с Symfony 4?

Question

Я хочу добавить SASS в свой проект, я использую Symfony 4.2.1 / Ubuntu 16.04

Вот команды, которые я использую:

composer require encore
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
yarn install

Итак, у меня есть файл webpack.config.js, который описан в документации:

// webpack.config.js
// ...

Encore
    // ...

    // enable just the one you want

    // processes files ending in .scss or .sass
    .enableSassLoader()

    // processes files ending in .less
    .enableLessLoader()

    // processes files ending in .styl
    .enableStylusLoader()
;

Существует объект Encore.

В другом уроке я вижу:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Это совершенно другой тип файла, который в документации говорится (первый код)

И мой файл выглядит так:

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you require will output into a single css file (app.css in this case)
require('../css/app.css');

// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
// const $ = require('jquery');

console.log('Hello Webpack Encore! Edit me in assets/js/app.js');

Это снова другой тип файла!

Что мне теперь делать? (Я ничего не сделал после 'установки пряжи')

Answer 1

Ваш первый webpack.config файл был настроен для использования Encore, компонента Symfony, который упаковывает веб-пакет для обеспечения простого в использовании API.

Второй webpack.config файл не использует Encore, это традиционная настройка веб-пакета.

Поскольку вы используете последнюю версию Symfony, вы, вероятно, захотите использовать первую, которая предоставляет гораздо более простой для понимания API.

Вы можете узнать больше о Encore в документации Symfony здесь: https://symfony.com/doc/current/frontend/encore/css-preprocessors.html