Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Include doesn't copy -ms properties and extend is not working at all #39

Open
schel4ok opened this issue Dec 29, 2019 · 0 comments
Open

Comments

@schel4ok
Copy link

I have webpack in Laravel 6

webpack.mix.js

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

mix.react('resources/js/app.js', 'public/js');
mix.scripts([
    'public/js/app.js',
    'resources/js/includes/ral.js',
    'resources/js/includes/script.js'
],  'public/js/app.js')
	.sourceMaps()
	.version();
mix.sass('resources/sass/app.scss', 'public/css');

Then I have bootstrap, slick-carousel and sass-flex-mixin installed in node_modules folder and I import them in my app.scss

app.scss

@import '~bootstrap/scss/bootstrap';
@import '~slick-carousel/slick/slick';
@import '~slick-carousel/slick/slick-theme';
@import '~sass-flex-mixin/flex';
@import 'variables';
@import 'includes/fontello';
@import 'style';

Then in _style.scss I have

.mystyleinc { @include flexbox; }
.mystyleext { @extend %flexbox; }

As I understand from tests.css both styles should be compiled into code below

.flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }

But I have different output. For mystyleinc I see only 3 of 5 properties. And mystyleext is absolutely empty.

.mystyleinc {
  display: -webkit-box;
  display: -moz-flex;
  display: flex;
}

What is wrong?

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant