有谁知道如何在 Laravel 4 上安装 SASS？答案

【问题标题】：Does anyone know how to install SASS on Laravel 4?有谁知道如何在 Laravel 4 上安装 SASS？
【发布时间】：2013-11-01 23:40:07
【问题描述】：

我正在尝试在 Laravel 4 上安装 SASS。

我正在运行 composer 并且我的 composer.json 设置如下：

{
    "name": "laravel/laravel",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "require": {
        "laravel/framework": "4.0.*",
        "cartalyst/sentry": "2.0.*",
    },
    "autoload": {
        "classmap": [
            "app/commands",
            "app/controllers",
            "app/models",
            "app/database/migrations",
            "app/database/seeds",
            "app/tests/TestCase.php"
        ]
    },
    "scripts": {
        "post-install-cmd": [
            "php artisan optimize"
        ],
        "post-update-cmd": [
            "php artisan clear-compiled",
            "php artisan optimize"
        ],
        "post-create-project-cmd": [
            "php artisan key:generate"
        ]
    },
    "config": {
        "preferred-install": "dist"
    },
    "minimum-stability": "dev"
}

我想知道在 composer 中是否有一种非常简单的方法可以将其添加为项目依赖项。

我想这样做的原因是因为它更易于管理，并且从长远来看有助于构建。

如果有另一种方法，并安装 grunt 以缩小 css/js，那就更好了。

谢谢。

【问题讨论】：

标签： php sass laravel-4 gruntjs compass-sass

【解决方案1】：

试试laravel-sass！

由于我发现的所有其他项目要么已死，要么严重损坏，要么根本不提供任何自动 scss 编译（无需每次都手动触发），我最终编写了一个简单的工具：

自动将您的 scss 文件夹中的所有 .scss 编译成同名的 .css 文件到您的 css 文件夹中
用纯 PHP 编写！
使用出色的scssphp compiler 并在其周围添加自动化
支持最新的SCSS语法，目前是SCSS 3.2.12
通过 Composer 安装，只需一行代码
让您定义 scss 和 css 文件夹，这样您的 scss 始终拥有准确的同名 css 文件

安装教程在我的博客上：How to use SASS in Laravel。

【讨论】：

你被入侵了吗？我刚刚发现我爱你。
是否支持 .sass 语法（不仅仅是 .scss）？
@Sonique 不，但是 .sass 它已经过时多年了，所以没有理由支持它。
@Panique 谢谢。不知道那个。官方文档中没有提到这一点（可能旧但受支持且未弃用）。我喜欢没有花括号和分号的漂亮的 Python 语法。（也许是时候改用手写笔了。）

【解决方案2】：

你好 laravel 开发者，

在 Laravel 5 及更高版本中，您可以在 require-dev 中添加它，注意不要在普通 require 中。

路径：“composer.json”

"require-dev": {
    "panique/laravel-sass": "1.0"
}

将此行添加到索引文件中。

路径：public/index.php。

SassCompiler::run("resources/sass/", "public/css/");

注意“resources/sass”是输入文件路径，“public/css”是输出编译路径。您也可以将其保留为简单的路径，例如 SassCompiler::run("scss/", "css/");

需要在webpackc下添加新的scss文件。

路径：webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/student.scss', 'public/css')
.sass('resources/sass/website.scss', 'public/css');

我为示例添加了一些示例，例如应用程序、学生和网站。 Sass 和 Scss 也是相同的，只有很少的语法差异可以阅读更多内容：Sass and Scss difference

【讨论】：