何时编译SASS

时间:2018-09-04 11:20:18

标签: css web sass

我是Web开发的新手。我已经读过有关SCSS / SASS的文章,但我意识到这不是浏览器所需要的,因此应将其编译为纯CSS。我的问题是我做对了吗?

  • 每当我对SCSS文件进行更改时,我都应该对其进行编译,然后查看结果。

  • 每当我要更新我的网站时,我都应该在服务器端使用特殊的脚本将新的SCSS文件转换为纯CSS,并且每次更新仅发生一次。 (CSS文件数量很多,我希望仅将SCSS保留在我的存储库中。)

如果您有任何进一步的信息,我将不胜感激。

很多tnx

2 个答案:

答案 0 :(得分:0)

我将以Laravel为例。

Laravel随附Laravel Mix,可让您通过内部使用Webpack将SCSS,LESS等编译为CSS。 (它也可以处理js)

Laravel默认带有resources/assets/sass文件夹,这是放置scss / sass文件的位置。

然后,当您运行npm run dev时,它将编译这些文件并将其放入您的public/css文件夹中。每当您进行更改并保存scss文件时,也可以使用npm run watch来编译这些文件。

它还具有npm run prod命令,该命令以缩小的格式编译文件,从而使文件更轻。

如果您要使用SCSS编写所有CSS,则甚至不需要将public / css文件夹放入git存储库中。

每当您将更改推送到git并想在服务器中更新它们时,只需更新服务器的存储库并运行您拥有的compiling命令即可。

如果您没有使用git将更改推送到服务器,则可以使用npm run prod编译CSS文件,然后通过FTP或您执行的任何方式将这些文件推送到服务器。

答案 1 :(得分:0)

为了将 SCSS 编译为 CSS ,我们使用任务运行程序,例如 Gulp Webpack 等。 ”将说明以 Gulp 为例。

什么是Gulp?

  

Gulp是任务运行程序,在前端Web开发过程中用作流构建系统。主要用于Web开发中耗时且重复的任务的自动化,如缩小,连接,编译,单元测试,整理,优化等。

您可以使用 Gulp 来编译SCSS代码CSS,并通过gulp实时监视更改。

要安装 Gulp ,您必须在系统中安装Node Js。之后,使用npm i gulp-cli -g安装gulpFurtherer步骤,您可以在其官方website上看到它

要将 SCSS 编译设置为 CSS ,这是关于Gulp入门SCSS编译和其他任务的最佳文章。 Gulp for Beginners