Can't use @mixins

Having another issue with this loader pertaining to Mixins. For years have just done something like:

@mixin [breakpoint]{
    @media only screen and (min-width: [breakpoint]){
        @content;
    }
}

But now I’m getting errors trying to do Mixins

error

ERROR in ./src/index.scss
Module build failed: ModuleBuildError: Module build failed: Undefined mixin break-xs (3:1)

1 | @import "../settings/breakpoints.scss";
2 |
> 3 | @mixin break-xs {
...

---

index.jsx

require('./index.scss');

---

index.scss

@import "assets/stylesheets/settings/breakpoints.scss";
@import "assets/stylesheets/tools/media-queries";

---

media-queries.scss

@mixin break-xs {
  @media only screen and (min-width: $screen-xs) {
    @content;
  }
}

I’ve also added import "../settings/breakpoints.scss"; to the top of the file because I was reading in places that you may have to import resources since Webpack silos global variables with my other declarations so jury still out on that.

---

webpack.config

...
{
  test: /\.(s?)css$/,
  use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader', 'sass-loader', 'resolve-url-loader', 'postcss-loader']
  })
},
...
new ExtractTextPlugin({
  filename: 'app.css',
  disable: false,
  allChunks: true
}),
...

• Webpack 2.2.1
• node-sass 4.5.0
• sass-loader 6.0.2
• style-loader 0.13.2
• postcss-loader 1.3.5
• extract-text-webpack-plugin 2.0.2

[alexander-akait]

@wsfuller Then you should create migration-from-gulp-and-grunt.md and move this docs in webpack-docs, not here

[alexandrebcaruso]

Hi! I wonder how we can achieve this with Webpack 5.

I’m trying to build css files from scss like: resources/scss/button.scss to src/components/button.css which should be pretty straight forward but because in buttons.scss I have “@ include” rules I can’t find a way to do that. I d expect webpack to resolve the “@ includes” (resources/scss/mixins).

Sorry if I’m asking in the wrong place but this thread seems to be the closest working solution (at least for wp2). Thank you so much!