Next.js: Add custom alias for scss import in 'with-global-stylesheet' example

[aulneau]

Hello!

First off, I love what ya'll are making :)

I am trying to add an alias so that I can import some common scss files into places that need it without having to reference the files relatively.

~scss/filename vs ../../../../common/scss/filename

I have used this in other webpack projects:

    resolve: {
        alias: {
            'scss': path.resolve(__dirname, "common/scss")
        }
    }

But I am not sure how to implement it in my next.config.js
And this is my next.config.js

module.exports = {
    webpack: (config, {dev}) => {
        config.module.rules.push(
            {
                test: /\.(css|scss)/,
                loader: 'emit-file-loader',
                options: {
                    name: 'dist/[path][name].[ext]'
                }
            }
            ,
            {
                test: /\.css$/,
                loader: 'babel-loader!raw-loader'
            }
            ,
            {
                test: /\.scss$/,
                loader: 'babel-loader!raw-loader!sass-loader',
            }
        )
        return config
    }
}

[davibe]

There is some discussion going on about this in here https://github.com/davibe/next.js-css-global-style-test/issues/3
This is the repository where i developed and i continue developing the `with-global-stylesheet example.

[timneutkens]

@davibe lets keep the discussion there then. When it's done I'd love a PR back 👍

[orlin]

@aulneau I plan to work on a PR / upgrade of with-global-stylesheet addressing this issue, probably tomorrow. In the meantime, if you'd like to @import with Sass then change this code from includePaths: ['node_modules', 'node_modules/@material/*'] to ['common/scss', 'node_modules'], which seems to be the path in your case, relative to the project root dir. If you'd like to access the .scss from .js pages or components without relative paths - take a look at babel-plugin-module-resolver which would enable you to import / require Sass stylesheets from JavaScript. I plan to add that to the example as well.

[aulneau]

@orlin @timneutkens @davibe great, thank you all.

For anyone who happens upon this issue, I have it working as such:

next.config.js

const path = require('path')
const glob = require('glob')
module.exports = {
    webpack: (config, {dev}) => {
        config.module.rules.push(
            {
                test: /\.(css|scss)/,
                loader: 'emit-file-loader',
                options: {
                    name: 'dist/[path][name].[ext]'
                }
            }
            ,
            {
                test: /\.css$/,
                loader: 'babel-loader!raw-loader'
            }
            ,
            {
                test: /\.scss$/,
                loader: 'babel-loader!raw-loader!sass-loader'
            },
            {
                test: /\.scss$/,
                loader: 'sass-loader',
                options: {
                    includePaths: ['common/scss']
                        .map((d) => path.join(__dirname, d))
                        .map((g) => glob.sync(g))
                        .reduce((a, c) => a.concat(c), [])
                }
            }
        )
        return config
    }
}

and I can now import in my scss files as such: @import "partials/abstract" which points to common/scss/partials/abstract.scss

[orlin]

@aulneau you’re welcome. Btw, the following part of your next.config.js…

            {
                test: /\.scss$/,
                loader: 'babel-loader!raw-loader!sass-loader'
            },
            {
                test: /\.scss$/,
                loader: 'sass-loader',
                options: {
                    includePaths: ['common/scss']
                        .map((d) => path.join(__dirname, d))
                        .map((g) => glob.sync(g))
                        .reduce((a, c) => a.concat(c), [])
                }
            }

… can be reduced to:

      { test: /\.scss$/,
        use: [
          'babel-loader', 'raw-loader',
          { loader: 'sass-loader',
            options: {
              includePaths: ['common/scss']
                .map((d) => path.join(__dirname, d))
            }
          }
        ]
      },

You aren’t using glob* (in this case), nor should be matching the scss twice - I was surprised that the latter even worked (guessing it would break importing scss from js).