I can't use compass and susy into my custom webpack

[jackmatrix]

I'm struggling since many hours trying to find a way to get my compass and susy framework to run in my nextjs app.

I am using global style sheets to run scss. Everything works fine and i can process to basics scss operations.

However i cannot use compass and susy Frameworks.

I don't know what to do more :

{
        test: /\.s(a|c)ss$/,
        use: ['babel-loader', 'raw-loader','postcss-loader',
          { loader: 'sass-resources-loader?includePaths[]=' + path.resolve(__dirname, "./node_modules/compass-mixins/lib") + "&includePaths[]=" + path.resolve(__dirname, "./mixins/app_mixins"),
            options: {
              resources: ['./styles/scss/pageone.scss','./styles/scss/pagetwo.scss']
              
            }
          }
        ]
      },

But i'm getting these errors every time :

(Emitted value instead of an instance of Error) postcss-import: 

.../scss/file.scss:2:1: Cannot find module 'compass' from

 '../styles/scss'

(Emitted value instead of an instance of Error) postcss-import: 

.../scss/file.scss:2:1: Cannot find module '~susy/sass/susy' from

 '../styles/scss'

in my scss files i declare these frameworks just like that :

@import 'compass
@import '~susy/sass/susy'

I don't know what to do more.

Thanks for helping.

[jackmatrix]

Okay i think i can handle compass and susy importation by changing my setup :

{
        test: /\.s(a|c)ss$/,
        use: ['babel-loader', 'raw-loader','postcss-loader',
          { loader: 'sass-loader',
            options: {
               includePaths: ['styles',"node_modules", 'node_modules/compass-mixins/lib']
                .map((d) => path.join(__dirname, d))
                .map((g) => glob.sync(g))
                .reduce((a, c) => a.concat(c), [])
            }
          }
        ]
      }

However, i get a new error. Its seems mixins aren't recognized at all :

Module build failed: 
  @include container(600px);
          ^
      No mixin named container

Any idea ?

[timneutkens]

Please see https://github.com/zeit/next.js/tree/v3-beta/examples/with-global-stylesheet, you can't just use a webpack loader. This has been explained in many issues. If you search for css in the issues you'll find exactly why. #1245