代码

Question

我正在尝试将包css文件添加到我的app.scss中，但是它不起作用，

代码

app.scss

@import '~tjdbs4/tjdb4.css';

webpack.mix.js

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

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

当我运行npm run watch时，它可以成功运行，但样式不会添加到app.css

有什么主意吗？

更新

这是我完整的app.scss文件

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/dist/bootstrap-vue.css';
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~tjdbs4/tjdb4';



.navbar-laravel {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

当我使用@import '~tjdbs4/tjdb4';并运行npm run watch命令时，我得到：

ERROR  Failed to compile with 2 errors                                                                                                  22:53:58
 error  in ./resources/assets/sass/app.scss

Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../webfonts/fa-brands-400.eot' in

但是如果我使用@import '~tjdbs4/tjdb4.css';并运行npm run watch，则不会显示任何错误，并且不会将我的css文件与其他文件混在一起。

Answer 1

由于webpack可以正确解决@import '~tjdbs4/tjdb4.css';而不会产生“ css-loader”错误，因此您可能需要中断浏览器缓存。

您可以通过对已编译资产进行版本控制来解决此问题。了解更多here。

在webpack.mix.js文件中进行这些更改以打开版本控制。

mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css') .version();
现在再次运行npm run watch。

这将导致在公用文件夹下创建一个新文件mix-manifest.json。
然后按如下所示修改刀片服务器模板

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

Answer 2

您应该可以通过从路径中删除扩展名来使它起作用：

@import '~tjdbs4/tjdb4';

Answer 3

您的错误似乎是FontAwesome字体，尤其是其中的品牌图标集出现的问题。

app.scss中的整个区块

@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

应如下所示放置在主js文件中

示例

app.js

import brands from '@fortawesome/fontawesome-free-brands'
import regular from '@fortawesome/fontawesome-free-regular'
import solid from '@fortawesome/fontawesome-free-solid'
import fontawesome from '@fortawesome/fontawesome'

fontawesome.library.add(brands)
fontawesome.library.add(regular)
fontawesome.library.add(solid)

将css导入到csss在laravel中不起作用

代码

更新

3 个答案: