Phoenix framework ile SASS/SCSS nasıl kullanılır?

Question

Phoenix Framework'ü kullanırken stil sayfaları için sass/scss kullanmanın bir yolu var mı? Ve eğer varsa, o zaman nasıl?

Answer 1

Phoenix framework, varlık borusu için brunch kullanır. docs itibaren

:

yerine kendi varlık boru hattının uygulanması

Phoenix Brunch, hızlı ve geliştirici dostu varlık aracı inşa kullanır. Phoenix, Brunch için varsayılan bir konfigürasyon ile birlikte gelir ve kutudan çıkacaktır, ancak bunu ihtiyaçlarına göre bükmek çok kolaydır, CoffeeScript, TypeScript veya LESS gibi çeşitli script ve stil dilleri için destek ekleyin.

, SASS desteği eklemek proje kök in package.json içinde 'küstahlık-kahvaltısı' eklemek için:

{ 
    "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" 
    } 
} 

Sonra npm install çalıştırın.

Phoenix çerçevesi, varsayılan olarak brunch olmaksızın varlık yönetimini destekler.

yeni bir proje oluştururken:

mix phoenix.new

Brunch yapılandırması olmadan bir proje yaratacak no-Brunch my_project. Yapılı öğeleri priv/static/'a kopyalayabilen bir sistem kurmanız ve ayrıca kaynak dosyalarınızı her değişiklikte otomatik derleme yapmak için izlemeniz gerekir. Daha fazla bilgi için docs'u okuyun.

Answer 2

Google beni burada buldu ve @emaillenin yanıtı işe yaramadı (varsayılan Phoenix 1.0.4 kullanıyorum), bu yüzden başka bir şey bulmak zorundaydım.

hüner

npm install --save sass-brunch@^1.9.2 

Görünüşe göre, sass-brunch 2.0 sonra bir şeyler kırdı ve o anka sevk brunch sürümüyle artık çalışmıyor yapmaktır.

Bu yardımcı olur umarım!

Answer 3

İşte taahhüt olarak aldım adımlarla bir çalışma demo Repo var:

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

---

Eğer sass-brunch düğüm paketini yüklemeniz gerekir, SUKDÖ/SCSS kullanın.

npm install --save sass-brunch 

Ardından brunch-config.js böylece eklentileri bölümünde şöyle düzenleyin: Bir kez sen yapmak

// 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! 
    } 
}, 

---

, herhangi .sass veya .scss dosyaları sorunsuz çalışacak.

Answer 4

Buradaki bazı cevaplar, brunch-config.js, others package.json. Phoenix 1.3 uyumluluk sorunları çözülürse, hem npm install hem de brunch'u kullanmak mümkündür.

brunch-configplugins bölümüne sass ekleyin:

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

Ekle sasspackage.json için devDependencies bölümü:

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

Sonra Sadece bu artık belirterek

cd assets 
npm install