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

Ответ 1

В инфраструктуре Phoenix используется brunch для конвейера активов.

Из docs:

Вместо того, чтобы внедрять собственный конвейер активов, Phoenix использует Brunch, быстрый и удобный для разработчиков инструмент для создания активов. Phoenix поставляется с конфигурацией по умолчанию для Brunch, и она будет работать из коробки, но ее очень легко свести к нашим потребностям, добавить поддержку для различных языков script и стиля, таких как 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.

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

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

mix phoenix.new --no-brunch my_project

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

Ответ 2

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

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

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

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 будут работать без проблем.

Ответ 3

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

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

npm install --save [email protected]^1.9.2

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

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

Ответ 4

В некоторых ответах здесь предлагается изменить 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