Laravel - 将自定义样式添加到现有的 app.scss答案

【问题标题】：Laravel - Add custom styling to the existing app.scssLaravel - 将自定义样式添加到现有的 app.scss
【发布时间】：2019-02-14 22:37:08
【问题描述】：

我是 Laravel 的新手，我在 Stackoverflow 上阅读了其他一些关于向 Laravel 添加自定义样式的问题。

我创建一个新的 stackoverflow 问题的原因是因为 Laravel 似乎编译了一个 app.css，它也加载了引导程序。我认为这是通过运行npm run dev 创建的，它编译了resources sass 文件夹中的app.scss。

在那个给定的文件中，引导程序由@import '~bootstrap/scss/bootstrap'; 加载，我也想用我自己的自定义样式遵循这个原则，这样我就可以得到类似于@import '~mywebsite.css'; 的东西

这样我最终会得到一个我认为更有说服力的 .css 文件。

解决此问题的适当方法是什么？此外，正在导入的这种“引导”样式位于何处？我不明白 '~' 的位置。

最后但同样重要的是，是否可以对app.js 文件使用相同的方法？

非常感谢，

【问题讨论】：

~ 在 node_modules 中。您的样式将位于资产中的同一文件夹或可能的子文件夹中，因此@import 'filename.scss'（对于同一文件夹）或@import 'subfolder/filename.scss'）（对于子文件夹）就足够了。
所以我是否可以假设“varables.scss”不是如何放置自己的 css 的示例？
不，这不是一个例子。它只是关于如何使用 bootstrap-sass 在您的网站上编译和包含引导程序的样板

【解决方案1】：

您可以在 /resources/sass 中创建一个新的 sass 文件，例如 _test.sass 并像这样将导入放在 app.sass 中：

@import 'test';

并使用 npm run dev 或 npm run watch 进行编译

如果您需要在公共文件夹中创建一个新文件，您可以创建一个新的 sass 文件（example.sass），然后更改 webpack.mix.js 文件并放入新的 css 行像这样：

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

并使用 npm run dev 进行编译。

问候！

【讨论】：