Question

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

Answer 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框架还支持资产管理，不提供早午餐。

创建新项目时：

mix phoenix.new --no-brunch my_project

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

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

谷歌让我来到这里，并且@emaillenin回答没有用（我使用默认的凤凰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

Answer 5

在 Phoenix 1.4 中，早午餐被替换为 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？

5 个答案: