импорт css в scss не работает в laravel - PullRequest
Новая
       33

импорт css в scss не работает в laravel

0 голосов
/ 11 сентября 2018

Я пытаюсь добавить пакет 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 с остальными.

Ответы [ 3 ]

0 голосов
/ 11 сентября 2018

Вы должны иметь возможность заставить это работать, удалив расширение из пути: 

@import '~tjdbs4/tjdb4';
0 голосов
/ 12 сентября 2018

Похоже, что ваша ошибка связана с 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)
0 голосов
/ 11 сентября 2018

Поскольку веб-пакет правильно разрешает @import '~tjdbs4/tjdb4.css';, не выделяя ошибку 'css-loader', скорее всего, вам нужно взорвать кеш браузера.

Вы можете исправить это, установив версии ваших скомпилированных ресурсов. Подробнее здесь .

  1. Внесите эти изменения в файл webpack.mix.js, чтобы включить управление версиями.

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

  2. Теперь снова запустите npm run watch.

    Это приведет к созданию нового файла mix-manifest.json в общей папке.

  3. Затем измените ваш шаблон лезвия следующим образом

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

...