如何在Phoenix框架中使用SASS/SCSS？

Question

在使用Phoenix Framework时,有没有办法在样式表中使用sass/scss？如果有,那怎么样？

Answer 1

Phoenix框架使用早午餐来进行资产管道.

来自文档:

Phoenix不使用自己的资产管道,而是使用Brunch,这是一种快速且开发人员友好的资产构建工具.Phoenix提供了Brunch的默认配置,它可以开箱即用,但很容易根据我们的需要进行弯曲,添加对各种脚本和样式语言的支持,如CoffeeScript,TypeScript或LESS.

要添加对SASS的支持,请在项目根目录中的package.json中添加"sass-brunch":

{
  "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框架还支持资产管理,无需早午餐.

在创建新项目时:

mix phoenix.new --no-brunch my_project

将创建一个没有早午餐配置的项目.您需要设置一个系统,该系统可以将构建的资产复制到其中priv/static/并查看源文件,以便在每次更改时自动编译.阅读文档了解更多信息.

Answer 2

这是一个工作演示回购,其中包含我作为提交的步骤:

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文件将无缝地工作.

Answer 3

Google让我来到这里并且@emaillenin的回答没有用(我使用的是默认的Phoenix 1.0.4),所以我必须找到别的东西.

诀窍是做

npm install --save sass-brunch@^1.9.2

显然,sass-brunch在2.0之后打破了一些东西,它brunch随着凤凰发布的版本不再起作用.

希望有所帮助!

Answer 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