Home>
As the title suggests, variables are used from the .scss file created in the assets directory in the Nuxt project, but an error occurs and I cannot proceed.
I'm stuck for a day, but I can't solve it.

By the way, I am referring to the following blog.
Use scss global variables in nuxt.js

Version information etc.
Modules etc. Version
Nuxt.js v2.10.2
node-sass v4.13.0
sass-loader v8.0.0
@ nuxtjs/style-resources v1.0.0
Contents of files that will be related

nuxt.config.ts

export default {
  mode: 'spa',
  (_ Omitted _)
  / *
  ** Global CSS
  * /
  css: [
    '@/assets/scss/app.scss'
  ],
  plugins: [
  ],
  buildModules: [
    '@ nuxtjs/eslint-module',
    '@ nuxt/typescript-build'
  ],
  typescript: {
    typeCheck: {
      eslint: true
    }
  },
  modules: [
    '@ nuxtjs/axios',
    '@ nuxtjs/pwa',
    '@ nuxtjs/style-resources' // added for reading variables
  ],
  styleResources: {
    sass: [
      '@/assets/scss/_var.scss' // scss file that describes the variables I want to read
    ]
  },
 (_ Omitted _)
}

package.json(Excerpts from only installed package information)

"dependencies": {
    "@ nuxt/typescript-runtime": "^ 0.2.4",
    "@ nuxtjs/axios": "^ 5.3.6",
    "@ nuxtjs/pwa": "^ 3.0.0-0",
    "nuxt": "^ 2.0.0"
  },
  "devDependencies": {
    "@ babel/core": "^ 7.7.2",
    "@ nuxt/typescript-build": "^ 0.3.4",
    "@ nuxtjs/eslint-config": "^ 1.0.1",
    "@ nuxtjs/eslint-config-typescript": "^ 0.1.3",
    "@ nuxtjs/eslint-module": "^ 1.0.0",
    "@ nuxtjs/style-resources": "^ 1.0.0",
    "@ storybook/addon-actions": "^ 5.2.6",
    "@ storybook/addon-links": "^ 5.2.6",
    "@ storybook/addons": "^ 5.2.6",
    "@ storybook/vue": "^ 5.2.6",
    "@ vue/test-utils": "^ 1.0.0-beta.27",
    "babel-eslint": "^ 10.0.1",
    "babel-jest": "^ 24.1.0",
    "babel-loader": "^ 8.0.6",
    "babel-preset-vue": "^ 2.0.2",
    "css-loader": "^ 3.2.0",
    "eslint": "^ 6.1.0",
    "eslint-plugin-nuxt": ">= 0.4.2",
    "jest": "^ 24.1.0",
    "node-sass": "^ 4.13.0",
    "sass-loader": "^ 8.0.0",
    "storybook-addon-vue-info": "^ 1.3.4",
    "style-loader": "^ 1.0.0",
    "vue-jest": "^ 4.0.0-0",
    "vue-loader": "^ 15.7.2",
    "vue-template-compiler": "^ 2.6.10"
  }

_var.sass

$palette-key: #fff;

Excerpt of error details

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): friendly-errors 06:55:33
SassError: Undefined variable: "$palette-key".
        on line 22 of /app/components/atoms/buttons/CommonLinkButton.vue
>>color: $palette-key;
   --------- ^
  • Answer # 1

    I'm not sure if it will be readable, but the import file type specified instyleResourcesin nuxt.config.ts is sass instead of scss. Others seem to be fine.

    styleResources: {
      scss: [
        '@/assets/scss/_var.scss' // scss file that describes the variables you want to read
      ]
    },