Laravel Mix 在 app.css 包中不包含 bootswatch答案

【问题标题】：Laravel Mix doesn't include bootswatch in app.css bundleLaravel Mix 在 app.css 包中不包含 bootswatch
【发布时间】：2020-05-11 17:09:09
【问题描述】：

我正在尝试在我的 laravel/react 项目中包含 bootswatch flatly 主题，但无论我做什么，bootswatch css 都不会像我预期的那样出现在 public/app.css 文件中。

我运行了npm i bootswatch，并验证我的 package.json 文件中有 bootswatch: ^4.4.1。我也运行了 npm install。

我在最初设置项目时也运行了这些命令：

composer require laravel/ui
php artisan ui bootstrap
php artisan ui react

app.scss

根据docs，您可以像这样设置导入：

@import "~bootswatch/dist/flatly/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/flatly/bootswatch";

webpack.mix.js

mix.react('resources/js/app.js', 'public/js').extract('jquery');
mix.sass('resources/sass/app.scss', 'public/css');
mix.styles('resources/css/custom.css', 'public/css/custom.css');

if (mix.inProduction()) {
   mix.version();
}

app.blade.php

<script src="{{ mix('js/manifest.js') }}" defer></script>
<script src="{{ mix('js/vendor.js') }}" defer></script>
<script src="{{ mix('js/app.js') }}" defer></script>

<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<link href="{{ mix('css/custom.css') }}" rel="stylesheet">

当我在新选项卡中打开 app.css 文件并搜索 bootswatch 时，我什么也没找到，样式也没有应用于页面。我错过了什么？

我已清除缓存并运行php artisan cache:clear，但不确定是否适用。在这一点上几乎尝试了任何事情。

Bootstrap css 已包含在 public/css/app.css 文件中。

【问题讨论】：

你后来编译你的资产了吗？ npm run dev 还是 npm run watch？在这里看不到那一步
当时我正在运行 npm run watch。
因为每次调用 npm run watch 或 dev 时都会覆盖 app.css，所以必须在 app.scss 中调用 bootswatch

标签： css reactjs bootstrap-4 laravel-6 laravel-mix

【解决方案1】：

答案是在 Laravel 生成的 app.scss 文件中注释掉这一行：

//@import 'variables';

它似乎干扰了添加 bootswatch 样式或覆盖它们，即使它首先包含在 app.scss 文件中，这让我认为它会被之后添加的任何内容覆盖。

【讨论】：