Nuxt.js: SCSS path in nuxt.config not resolved

[chiptoma]

Version

v2.4.0

Reproduction link

https://jsfiddle.net/

Steps to reproduce

What is expected ?

To import the scss file

What is actually happening?

Additional comments?

Working fine until 2.4.0
Node-sass and sass-loader installed.
Tried all sort of paths (@/, @, ~/, ~, /) and none of them work.
Removed node_modules and reinstalled them, removed package.lock.json...

_{This bug report is available on Nuxt community (#c8567)}

[manniL]

@chiptoma do you use extractCSS?

[chiptoma]

@chiptoma do you use extractCSS?
No

[pi0]

Please try @assets/... @chiptoma

[chiptoma]

Please try @assets/... @chiptoma

Tried all possible paths @, @/, ~, ~/,

[chiptoma]

@assets... @/assets... ~/assets... ~assets... assets...

[manniL]

@chiptoma can you show us your whole nuxt.config.js?

[pi0]

@chiptoma Something else. Please try npm i node-sass sass-loader / yarn add node-sass sass-loader

NVM. You stated it is installed

[chiptoma]

@chiptoma Something else. Please try npm i node-sass sass-loader / yarn add node-sass sass-loader

Like I said, node-sass and sass-loader deps are installed locally

[chiptoma]

@manniL
`
export default {
head: {
htmlAttrs: {
lang: 'en'
},

    titleTemplate: '%s | Headline',

    meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: 'Meta description global' }
    ],

    link: [
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700' } 
    ],

},

loading: {
    color: "#2ecc71",
    failedColor: "#e74c3c",
    height: "5px"
},

router: {
    linkActiveClass: "",
    linkExactActiveClass: "active"
},

server: {
    port: 3000, // default: 3000
    host: "0.0.0.0" // default: localhost
},

css: [
    "@/assets/scss/main.scss",
    "bootstrap-vue/dist/bootstrap-vue.css"
],

styleResources: {
    scss: [
        "~/assets/scss/_variables.scss"
    ]
},

modules: [
    ['bootstrap-vue/nuxt', { css: false }],
    ['nuxt-validate', {
        lang: 'en',
        delay: 500,
        dictionary: null,
        events: 'input|blur',
        fastExit: false,
    }],
    ['portal-vue/nuxt'],
    '@nuxtjs/style-resources',
    "nuxt-fontawesome"
],

plugins: [
    "~/plugins/global.client",
    "~/plugins/icon",
    "~/plugins/bootstrap-vue"
],

fontawesome: {
    component: "fa",
    imports: [
        {
            set: "@fortawesome/pro-regular-svg-icons",
            icons: [
                "faShoppingCart",
                "faBars",
                "faHome",
                "faStore",
                "faEnvelope",
                "faUserAlt",
                "faCartArrowDown",
                "faTachometerAlt",
                "faMoneyCheckAlt",
                "faDownload",
                "faUserEdit",
                "faSignOutAlt",
                "faTimes",
                "faSignInAlt"
            ]
        }
    ]
},

build: {
    transpile: ['lodash-es', 'bootstrap-vue']
}

}
`

[manniL]

@chiptoma Can you try it without https://github.com/nuxt-community/style-resources-module/ :thinking:

[pi0]

@chiptoma Would you please try building with nuxt build and share it with us? Production build should get more complete details of error.

[chiptoma]

Found it!
Apparently, sass-resources-loader dep was missing. I wonder how that happened as @nuxtjs/style-resources has it as a dependency.
After installing it manually everything is fine...

[manniL]

Yey :clap:

[Mertakus]

You say that manually installing the sass-resources-loader did the trick for you, how in the world did you 'manually' install it though. Can someone please explain that to me, been searching for this stupid problem for hours now...

@chiptoma @manniL

[christopherarter]

@Mertakus

npm install --save-dev sass-resources-loader

[galuhramaditya]

put this to your nuxt.config:

render: {
bundleRenderer: {
shouldPreload: (file, type) => {
return ['script', 'style', 'font'].includes(type)
}
}
}

references: https://nuxtjs.org/examples/global-css/

[lsblsb]

@galuhramaditya: the render declaration seems not be required, if you ensure, that these packages are installed:
sass-resources-loader
sass-loader
node-sass

so the following command should do the trick:
npm install --save-dev sass-resources-loader sass-loader node-sass

[Dushusir]

step1:

npm i -D @nuxtjs/style-resources sass-loader node-sass

step2:

module.exports = {
    // Other nuxt.config.js

    modules: ['@nuxtjs/style-resources'],
    styleResources: {
        scss: [
            'assets/scss/file/_path.scss',
            'assets/scss/file/_path-two.scss'
        ]
    }
}

work for me!

[MSkred]

Same issue for me on "nuxt": "^2.10.2"
@pi0

 ERROR  Failed to compile with 1 errors                                                                                             friendly-errors 08:48:07

This relative module was not found:                                                                                                 friendly-errors 08:48:07
                                                                                                                                    friendly-errors 08:48:07
* ../client/assets/sass/main.scss in ./.nuxt/App.js                                                                                 friendly-errors 08:48:07
ℹ Waiting for file changes                                                                                                                          08:48:07
ℹ Memory usage: 244 MB (RSS: 359 MB) 

I've this devDependencies

  "devDependencies": {
    "@nuxtjs/style-resources": "^1.0.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0"
  }

[ryscript]

I don't know what in the world, but I couldn't get it working on my end, already tried all the suggestions above, read Nuxt Globel CSS documentation and still no luck, hmmm

```Nuxt.js @ v2.13.3 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: server-side │
│ ▸ Target: server ````

[MSkred]

Npm i