css - Laravel 从 scss 生成 css 我看不到变化

Question

我有一个用 Laravel 制作的元素。在 scss 文件中，我进行了更改(字体大小和颜色)，但我不知道 css 文件是如何生成的。因为我看不到 css 文件的变化。 在 Laravel 文档中，我看到 css 是以这种方式生成的:mix.sass('resources/sass/app.scss', 'public/css'); 但我不知道如何运行此命令。

Answer 1

如果你已经在你的机器上安装了 node 和 npm 并且已经在命令下运行了

npm install

然后您需要执行两个步骤。

第 1 步:在您的元素根文件夹中，有文件名 wbpack.mix.js 或 your/project/dir/wbpack.mix。 js 你可以根据需要编辑这个文件

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

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

第二步:编辑完这个文件后，你需要运行这个命令

npm run dev

使用此命令编译将开始，结束后，您可以重新加载浏览器以查看更改。 cntrl+F5 用于重新加载。

否则下载 node 并安装它，npm 将通过 node 过来。然后运行第一个命令并执行这两个步骤。

提示:如果你暂时改变你的scss文件或js，你可以运行这个命令

npm run watch

因为，如果你的 scss 和 js 文件发生了变化，你需要一遍又一遍地运行 npm run dev 来重新编译你的代码。但是如果你运行了 npm run watch，它会自动重新编译，只要你点击 cntrl+s。