Question

我有一个Symfony3项目，并希望将SASS用于我的样式表。

我查了很多页面并找到了与Assetic相关的线程 - 但没有“真正的”解释，如何在一个Symfony3项目中集成SASS。

不能太难，可以吗？

我很高兴听到任何提示或完整的“如何” - 感谢一帮！

Answer 1

我使用NPM创建了一个单独的前端构建过程，它可以处理所有图像，SASS / CSS和带压缩的JS等，然后添加构建步骤来生成所有内容。

如果您没有NPM，请按照说明安装：https://www.npmjs.com/get-npm

通过在项目目录中运行npm init来初始化项目。

安装一些用于编译和压缩的工具：

npm install node-sass --save-dev这会将SASS编译为CSS

npm install postcss-cli --save-dev这会处理已编译的CSS

npm install cssnano --save-dev这会缩小CSS并用作postcss

的插件

npm install autoprefixer --save-dev这会添加moz，webkit和供应商前缀，并用作postcss

的插件

npm install npm-run-all --save-dev这不是绝对必要的，但允许您在添加更多步骤时对命令进行分组。

一旦安装了这些依赖项，就可以添加构建脚本。打开package.json并修改scripts密钥。

{
  "name": "your-project-name",
  ...
  "scripts": {
    "build-task:scss-compile": "node-sass --source-map true app/Resources/sass/app.sass -o web/css",
    "build-task:css-minify": "postcss web/css/app.css --use cssnano autoprefixer -d web/css",
    "build": "npm-run-all -p build-task:*"
  },
  ...
}

您现在可以运行npm run build。 build-task:scss-compile会将您的SASS编译为web/css目录中的单个未压缩CSS文件，该文件可以链接到模板中。然后build-task:css-minify将压缩它并将任何供应商前缀添加到CSS。

如上所述，您可以添加更多构建任务，并以这种方式链接它们。您还可以添加文件监视器和监视命令，以便在修改任何监视文件时运行构建脚本。

不要忘记将node_modules添加到您的.gitignore文件中。

我选择在Symfony docs中概述的像Assetic和leafo / scss这样的单独进程的原因是，Assetic过滤器会给响应增加很多开销，因为它们会动态压缩，这会减慢速度发展很大。它还可以分离应用程序和演示文稿之间的关注点，并为您提供更大的灵活性，以便以后在不触及应用程序的情况下构建和调整前端。

编辑：以下是package.json文件的要点，该文件还将复制jQuery，FontAwesome，assets目录中包含任何图像或字体的任何内容，编译和缩小在检查错误并创建所需目录（如果它们尚不存在）之后的JavaScripts以及用于构建文件修改时的文件观察器： https://gist.github.com/matt-halliday/6b9a3a015b7a87c5b165ce1a9ae19c9b

如何使SASS在Symfony3项目中工作？

1 个答案: