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

Question

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

Answer 1

Phoenix 框架使用 brunch 作为资产管道。

来自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 框架也支持资产管理，默认没有 b运行ch。

创建新项目时：

mix phoenix.new --no-brunch my_project

将创建一个没有 b运行ch 配置的项目。您需要设置一个系统，可以将构建的资产复制到 priv/static/ 中，还可以观察您的源文件以在每次更改时自动编译。阅读 docs 了解更多信息。

Answer 2

Google 把我带到这里，@emaillenin 的回答没有用（我使用的是默认的 Phoenix 1.0.4），所以我不得不找别的东西。

诀窍是

npm install --save sass-brunch@^1.9.2

显然，sass-brunch 在 2.0 之后出现了一些问题，它不再适用于 phoenix 附带的 brunch 版本。

希望对您有所帮助！

Answer 3

这是一个工作演示存储库，其中包含我作为提交采取的步骤：

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 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

Answer 5

在 Phoenix 1.4 中，brunch 被替换为 webpack。

对我有用的说明：
https://elixirforum.com/t/phoenix-1-4-webpack-4-and-bulma-bootstrap-4-sass/14354/7
和
https://andrewtimberlake.com/blog/2018/06/how-to-use-sass-scss-with-webpack-in-phoenix-1-4

在你的 npm 项目中安装 node-sass 和 sass-loader
更新 webpack 配置中的加载器：{test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]}
将 app.css 重命名为 app.scss（以及其他 css 文件，包括导入语句，例如 @import './phoenix.css'; 为 @import './phoenix.scss';）
将 app.js 中的导入更新为 import css from "../css/app.scss"

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

How to use SASS/SCSS with Phoenix framework?

phoenix-framework