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

【问题标题】：How to use SASS/SCSS with Phoenix framework?如何在 Phoenix 框架中使用 SASS/SCSS？
【发布时间】：2019-02-23 02:01:42
【问题描述】：

在使用 Phoenix 框架时，有没有办法将 sass/scss 用于样式表？如果有，那怎么办？

【问题讨论】：

标签： phoenix-framework

【解决方案1】：

Phoenix 框架将 brunch 用于资产管道。

来自docs：

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 框架还支持默认不使用 brunch 的资产管理。

在创建新项目时：

mix phoenix.new --no-brunch my_project

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

【讨论】：

【解决方案2】：

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

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 文件都将无缝运行。

【讨论】：

phoenix默认将编译好的css和js文件输出到priv/static/目录下。所以一定要检查那里以确保一切正常。
native 表示：使用 LibSass，它是 Sass 引擎的 C/C++ 端口。
为什么建议使用native 作为重要部分？

【解决方案3】：

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

诀窍是做

npm install --save sass-brunch@^1.9.2

显然，sass-brunch 在 2.0 之后破坏了一些东西，并且它不再适用于 phoenix 附带的 brunch 版本。

希望有帮助！

【讨论】：

请注意，情况已不再如此。截至目前，最新版本的 sass-brunch [2.9.0] 与 phoenix 附带的 brunch 版本开箱即用兼容。修复它的提交是here

【解决方案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

【讨论】：

记住（可选）更新config/dev.exs 以同时观看 sass 文件以进行实时重新加载。例如：~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg|sass)$},

【解决方案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"

【讨论】：

这对我来说不太适合 Phx 1.4.10、Webpack 4.4.0。第 2 步中 use 下的值必须是 [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: {} }, { loader: 'sass-loader', options: {} } ] （这实际上是您发布的第二个链接中给出的值。通过该更改，它可以正常工作。