Блог

Главная - Вопросы по программированию - (Laravel) Как реализовать sass и tailwindcss в webpack.mix.js

(Laravel) Как реализовать sass и tailwindcss в webpack.mix.js

#css #laravel #sass

#css #laravel #дерзость

Вопрос:

Проблема в том, что я могу использовать только код A или код B в webpack.mix.js файл без каких-либо ошибок. Я использую jetstream, который использует tailwindcss в моем представлении панели инструментов, и я использую sass в другом представлении. Когда я использую только код B, панель мониторинга, очевидно, не может скомпилировать стиль.

Итак, как я могу использовать оба (tailwindcss, PostCSS и sass) без каких-либо ошибок?

Код A:

   mix.js('resources/js/app.js', 'public/js')
 .postCss('resources/css/app.css', 'public/css', [
     require('postcss-import'),
     require('tailwindcss'),
 ])
 .webpackConfig(require('./webpack.config'));

Код B:

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

Ответ №1:

Что плохого в том, чтобы просто добавить их?

 mix.js('resources/js/app.js', 'public/js')
   .mix.sass('resources/sass/app.scss', 'public/css/sass.css')
   .postCss('resources/css/app.css', 'public/css/postCss.css', [
       require('postcss-import'),
       require('tailwindcss'),
   ])
   .webpackConfig(require('./webpack.config'));

Вам нужно будет включить оба public/css/sass.css и public/css/postCss.css с этим решением.

Комментарии:

1. Sass правильно скомпилирован с вашим решением, теперь у меня ошибка после запуска npm dev. Существует sth. неправильно с . webpackConfig

Ответ №2:

Сначала, пожалуйста, подтвердите, что вы установили следующие пакеты в package.json .

если нет, пожалуйста, установите с npm 

 resolve-url-loader
sass
sass-loader
tailwindcss

Если вы добавили sass код webpack.mix.js , Laravel рекомендует установить пакеты, связанные с sass запуском npm run dev , и они будут установлены автоматически.
Но это сработает, когда вы npm run dev снова запустите команду.

Затем webpack.mix.js для меня работает следующее sass и tailwindcss 

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

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/scss/home.scss', 'public/css/home')
    .postCss('resources/css/app.css', 'public/css', [
        //
        require("tailwindcss"),
    ]);
Метки: