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

Question

使用 Phoenix Framework 时，有没有办法将 sass/scss 用于样式表？如果有，那么如何？

Answer 1

Phoenix框架使用brunch对于 Assets 管道。

来自 docs :

Instead of implementing its own asset pipeline, Phoenix uses Brunch, a fast and developer-friendly asset build tool. Phoenix comes with a default configuration for Brunch and it will work out of the box, but it is very easy to bend it to our needs, add support for various script and style languages, like CoffeeScript, TypeScript, or 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 框架还默认支持 Assets 管理，无需早午餐。

创建新项目时:

mix phoenix.new --no-brunch my_project

将创建一个没有早午餐配置的项目。您需要设置一个可以将构建的 Assets 复制到 priv/static/ 的系统。并观察您的源文件以在每次更改时进行自动编译。阅读 docs了解更多信息。