Как использовать SASS/SCSS с фреймворком Phoenix?

Платформа Phoenix использует бранч для конвейера ресурсов.

Из документов:

Вместо реализации собственного конвейера активов Phoenix использует Brunch, быстрый и удобный инструмент для создания активов. Phoenix поставляется с конфигурацией по умолчанию для Brunch, и она будет работать из коробки, но ее очень легко согнуть под наши нужды, добавить поддержку различных языков сценариев и стилей, таких как CoffeeScript, TypeScript или LESS.

Чтобы добавить поддержку SASS, добавьте «sass-brunch» в ваш package.json в корне проекта как:

{
  "repository": {
  },
  "dependencies": {
    "brunch": "^1.8.1",
    "babel-brunch": "^5.1.1",
    "clean-css-brunch": ">= 1.0 < 1.8",
    "css-brunch": ">= 1.0 < 1.8",
    "javascript-brunch": ">= 1.0 < 1.8",
    "sass-brunch": "^1.8.10",
    "uglify-js-brunch": ">= 1.0 < 1.8"
  }
}

Затем запустите npm install.

Фреймворк Phoenix также по умолчанию поддерживает управление активами без бранча.

При создании нового проекта:

микс phoenix.new --no-brunch my_project

создаст проект без конфигурации бранча. Вам нужно настроить систему, которая может копировать встроенные ресурсы в priv/static/, а также следить за исходными файлами, чтобы выполнять автоматическую компиляцию при каждом изменении. Дополнительные сведения см. в документах.

Вот рабочее демонстрационное репо с шагами, которые я предпринял в качестве коммитов:

https://github.com/sergiotapia/phoenix-sass-example

Чтобы использовать SASS/SCSS, вам необходимо установить пакет узла sass-brunch.

npm install --save sass-brunch

Затем отредактируйте brunch-config.js, чтобы ваш раздел плагинов выглядел так:

// Configure your plugins
plugins: {
  babel: {
    // Do not use ES6 compiler in vendor code
    ignore: [/web\/static\/vendor/]
  },
  sass: {
    mode: "native" // This is the important part!
  }
},

Как только вы это сделаете, любые файлы .sass или .scss будут работать без проблем.

Google привел меня сюда, и ответ @emaillenin не сработал (я использую Phoenix 1.0.4 по умолчанию), поэтому мне пришлось искать что-то еще.

Хитрость заключается в том, чтобы сделать

npm install --save sass-brunch@^1.9.2

Судя по всему, sass-brunch что-то сломало после 2.0 и больше не работает с версией brunch, поставляемой с phoenix.

Надеюсь, это поможет!

Некоторые ответы здесь предлагают изменить brunch-config.js, другие package.json. Для Phoenix 1.3 решены проблемы совместимости, можно использовать как npm install, так и brunch.

Добавьте sass в раздел brunch-config plugins:

// brunch-config.js
plugins: {
  sass: {
    mode: "native" // This is the important part!
  }
}

Добавьте sass в раздел package.json devDependencies:

// package.json
{
  "devDependencies": {
    "sass-brunch": "2.10.4" // check latest version on sass-brunch page
  }
}

Затем

cd assets
npm install

В Phoenix 1.4 ветку заменили на webpack.

Инструкции, которые сработали для меня:
https://elixirforum.com/t/phoenix-1-4-webpack-4-and-bulma-bootstrap-4-sass/14354/7
и
https://andrewtimberlake.com/blog/2018/06/how-to-use-sass-scss-with-webpack-in-phoenix-1-4

1. Установите node-sass и sass-loader в свой проект npm.
2. Обновите загрузчик в конфигурации webpack: {test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]}
3. Переименуйте app.css в app.scss (и другие файлы css, включая операторы импорта, например, @import './phoenix.css'; в @import './phoenix.scss';)
4. Обновите импорт в app.js до import css from "../css/app.scss"