использовать компиляцию модуля стиля scss в laravel-mix vue? - PullRequest
Новая
       41

использовать компиляцию модуля стиля scss в laravel-mix vue?

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

У меня есть модульный шаблон, который использует Sass-loader для компиляции файлов scss, которые есть у каждого компонента, но использование этого в laravel с laravel-mix не сработает, что ничего не делает

i 'Используя самую новую версию laravel (5.8) с php7 и Vue JS

пример компонента: 

    <template>
       <div :class="$style.logo">
          <div :class="$style.logoContainer">
            <img
              v-if="!settings.isMenuCollapsed || withDrawer"
              src="resources/images/logo-inverse.png"
              alt
            >
            <img
              v-if="settings.isMenuCollapsed && !withDrawer"
              src="resources/images/logo-inverse-mobile.png"
              alt
            >
          </div>
        </div>
    </template>

    <style lang="scss" module>
    @import "./style.module.scss";
    </style>

вот компонент с его файлом style.scss для компиляции в качестве модуля.Классы здесь должны быть сохранены в $ style.

Я использую эти пакеты в package.json: 

"sass": "^1.15.2",
"sass-loader": "^7.1.0"

Мой babel.config.js: 

module.exports = {
  presets: ['@vue/app'],
  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true },
    ],
  ],
}

и, наконец, мой файл webpack.mix.js: 

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

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "sass-loader",
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    }
});

mix.alias({
    '@': '/resources/js'
})

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

Дело в том, что классы в scss-файлы компонентов не компилируются, и поэтому html-теги после компиляции не имеют стилей, теряяЯ структура моего шаблона.

это должен быть компонент скомпилированного файла: 

<div class="index_logo_hObJ1">
    <div class="index_logoContainer_1zCMH">
        <img src="resources/images/logo-inverse.png" alt="">
    </div>
</div>

и вот что я получаю: 

<div>
    <div>
        <img src="resources/images/logo-inverse.png" alt="">
    </div>
</div>

Как видите, ни один класс не был введен вdivs, и я не получаю ошибок при компиляции, что я делаю не так?

...