Как использовать SASS/SCSS с Phoenix framework?

Есть ли способ использовать sass/scss для таблиц стилей при использовании Phoenix Framework? А если есть, то как ?

4 21
phoenix-framework

4 ответа:

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

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

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

Добавить поддержка SASS, добавьте "Sass-бранч" в свой пакет.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 framework также поддерживает управление активами без бранча по умолчанию.

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

Микс Феникс.new --no-brunch my_project

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

21

Вот рабочий демо-РЕПО с шагами, которые я сделал в качестве коммитов:

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

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

Фокус в том, чтобы сделать 

npm install --save sass-brunch@^1.9.2

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

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

6

Некоторые ответы здесь предлагают модифицировать 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
5