С помощью laravel mix в проекте laravel vue, как я могу включить файлы scss во все компоненты? - PullRequest
Новая
       29

С помощью laravel mix в проекте laravel vue, как я могу включить файлы scss во все компоненты?

0 голосов
/ 28 августа 2018

Мне удалось заставить это работать только на базовом приложении vue, но у меня возникли проблемы с переносом его на laravel vue. Мне удалось добавить модуль в vue.config.js в приложении vue, который будет импортировать любые файлы scss, которые я добавил. Используя тот же код в приложении laravel vue в файле webpack.mix.js, он неправильно компилируется. Это мой файл webpack.mis.js: 

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

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `@import "./resources/assets/sass/variables.scss";`
            }
        }
    }
};

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

Я также пытался использовать другие конфигурации, предложенные в документах , но мне это не удалось. Я также видел много ответов , предлагающих просто включить относительный путь к файлам, которые я хочу включить в каждый компонент, но это неэффективно и подвержено ошибкам при разработке приложения. Должен быть способ добиться этого, и я только что неправильно настроил конфигурацию.

Любой совет приветствуется, спасибо.

1 Ответ

0 голосов
/ 29 мая 2019

Laravel Mix имеет опцию именно для этого. Это globalVueStyles.
Ознакомьтесь с документацией: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/options.md.

Будет работать только с extractVueStyles active: 

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .options({
     extractVueStyles: true,
     globalVueStyles: 'resources/sass/_variables.scss',
   })
   .version();
...