Nuxt.js: How to include .sss files? (sugarss)

[JGJP]

What I've tried:

assets/
    main.sss

nuxt.config.js:

module.exports = {
    css: [
        '@/assets/main.sss'
    ],
    build: {
        extend (config) {
            config.module.rules.push({
                test: /\.sss$/,
                use: ['style-loader', 'css-loader', 'postcss-loader?parser=sugarss']
            })
        }
    },
}

the error:

{ ReferenceError: window is not defined
    at server-bundle.js:3963:2
    at server-bundle.js:3952:46
    at module.exports.module.exports (node_modules/style-loader/lib/addStyles.js:77:0)
    at Object.<anonymous> (assets/main.sss?d5cb:16:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 86d236d61da82419e3a3:25:0)
    at Object.module.exports.Object.defineProperty.value (.nuxt/App.js:19:0)

I know there's definitely something wrong with this setup but I've tried a bunch of combinations of things so for now I'm just posting my attempt at a simple mimic of a working webpack config. Hoping somebody can help with this.

_{This question is available on Nuxt.js community (#c2443)}

[JGJP]

UPDATE: got it working like this..

assets/
    main.sss
    postcss.config.js

nuxt.config.js:

const styleLoader = require('nuxt/lib/builder/webpack/style-loader.js');
module.exports = {
    css: [
        '@/assets/main.sss'
    ],
    build: {
        extend (config) {
            config.module.rules.push({
                test: /\.sss$/,
                use: styleLoader.call(this, 'sss', 'postcss-loader')
            })
        }
    },
}

postcss.config.js:

module.exports = {
    parser: require('sugarss'),
    plugins: [
        require('autoprefixer')(),
        etc...
  ]
};

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.