Nuxt sass loader error

SASS Loader module build failed when setting up project #78

Version

• Prismic CLI version: 3.8.7
• Node version: 10.23.2

Reproduction

Follow slicemachine quick start instructions:
npx create-nuxt-app my-slicemachine-project

Nuxt app setttings:

cd my-slicemachine-project
prismic sm —setup
yarn dev

What is expected?

yarn dev run without errors

What is actually happening?

The text was updated successfully, but these errors were encountered:

I run yarn add sass-loader@^10.1.1 to fix the issue

Hey @pablogiralt, thanks for your contribution! I’m glad you figured out the issue.

That’s quite annoying if every setup leads to this issue now 🤔 I hope they’ll fix the issue soon

Hi, I have tested all the version from 8 to 11 and I still have this error on a new project. Why is this happening ?

Hey @kopax-polyconseil, I’m sorry to hear that, can you share your complete package.json, node version, and error details please?

Thanks for heleping:

I am having the following error when I start my application:

This is my devDepednencies :

I have tried to downgrade postcss-loader to v4 but then I couldn’t get my image assets due to a resolution problem.

I have also tried to downgrade sass-loader until v8, without sucesss.

I just want to use sass within a new create-react-app project, how can I do?

Hey thanks! Dumb question maybe but are you actually using Slice Machine? If not I’d suggest opening an issue on https://github.com/webpack-contrib/sass-loader to get relevant assistance ☺️ The above issue was linked to Slice Machine + Vue.js + SASS

No worries! I would have happily helped you with it but unfortunately I’m not familiar with React and it’s been a while since I had to dive into a Webpack config. I think you’ll get help there much quicker than here 🙂

I run yarn add sass-loader@^10.1.1 to fix the issue

In my case latest version is not working with Storybook with React.js but Thanks to you for specifying working version

plz error solve it—

ERROR in ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/App.scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can’t find stylesheet to import.
╷
3 │ @import «

© 2023 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

Scss not able to compile but able to compile sass #141

Module version
latest

Describe the bug
It seems the loaders are messing up.

• Created a simple project for testing
• style-resources, sass-loader, node-sass are optional

• Added configuration as described in the repo https://github.com/nuxt-community/style-resources-module
• Try using simple scss in pages/index.vue , compile and working:

• Adding vuetify-module
• Compile again, got:

The text was updated successfully, but these errors were encountered:

Over here I have the same problem, I don’t recognize the «;» when importing scss files from the main.scss

My initial attempt is to write scss inside a page style, then will gradually migrate main.css into main.scss . But it failed at the start, it’s why I have to add sass loader (which I can see vuetify-module already had).

@clixmat sass-loader is shipped by the Vuetify module, and it has been upgraded to v8 starting 1.6.0 version of the Nuxt Vuetify module.

Furthermore, Vuetify module use sass (dart-sass), not node-sass , which may cause issues.

Other notes :
@nuxtjs/styles-resources hasn’t be upgraded to v8. So it isn’t compatible with Vuetify module.

Please open an issue on @nuxtjs/styles-resources, or you can try the following :

Источник

import from ‘path’ throws an error #4

I’ve tried to implement this loader to load a global scss variable file in my nuxt project, but when I run npm run dev I get the following error:

(function (exports, require, module, __filename, __dirname) < import from ‘path’
^^^^^^
SyntaxError: Unexpected token import

Here is my nuxt.config.js:

Can you see what I am doing wrong? Seems like a simple setup but I can’t get past that error

The text was updated successfully, but these errors were encountered:

Hi @cbaxter713 , the error is not related to the package.

Try changing the first line to: const resolve = require(‘path’).resolve;

@cbaxter713 have you configured .babelrc in your project?

I have not. I am just using the nuxt-community/starter-template

This seems to me to be some node module definition, try to do as I suggested above.

What version of the node are you using?

I am using 8.9.4. It seems like your fix for the resolve declaration helped, but now I am having issues with node-sass loading as a dependency

What version of node should I be running? I am going to try a fresh nuxt build using:
vue init nuxt-community/starter-template `

Unless you suggest a different nuxt setup

but now I am having issues with node-sass loading as a dependency

Can you show me the error?

I started a fresh project just to get this running, and after implementing the setup for nuxt-sass-resource-loader, I get the following error:

ERROR in ./pages/index.vue Module not found: Error: Can’t resolve ‘sass-loader’ in ‘/Users/colinbaxter/repos/nuxt-basic/pages’ @ ./pages/index.vue 4:2-494 @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

Do I just need to add sass-loader as a dev dependency?

I install sass-loader, and I get:

npm WARN sass-loader@6.0.6 requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.

Install too node-sass

Right, this is the problem I ran into before. When I install node-sass I get the following output:

`> node-sass@4.7.2 install /Users/colinbaxter/repos/nuxt-basic/node_modules/node-sass

Источник

sass-loader >11 compatibility #8771

Versions

Reproduction

Update sass-loader to latest release (11.0.0).

What is Expected?

What is actually happening?

The text was updated successfully, but these errors were encountered:

You’re right, Nuxt 2 is currently not compatible with loaders designed for Webpack 5.

Just make sure to install the appropriate version of any loaders you install manually (that is, targeting Webpack 4).

so did you mean to revert to saas loader v10 to solve this issue ? or upgrade webpack ?

Yes, you should revert to the version compatible with Webpack 4 👍

ok, good
but could i upgrade my webpack to v5 ?

<
«name»: «Admin-Portal»,
«version»: «2.0.0»,
«private»: true,
«description»: «Yalla Dealz Admin Portal»,
«author»: «Yalla Dealz Inc»,
«scripts»: <
«build»: «nuxt-ts build»,
«test:unit»: «vue-cli-service test:unit»,
«lint»: «eslint —ext .js,.vue —ignore-path .gitignore .»,
«dev»: «nuxt-ts»,
«generate»: «nuxt-ts generate»,
«lintfix»: «eslint —fix —ext .js,.vue —ignore-path .gitignore .»,
«sass»: «sass —watch assets/scss/custom.scss:assets/css/bootstrap.css assets/scss/main-style.scss:assets/css/main-style.css»,
«start»: «nuxt-ts start»,
«test»: «jest»,
«release»: «release-it»
>,
«dependencies»: <
«@babel/preset-env»: «^7.12.7»,
«@johmun/vue-tags-input»: «^2.1.0»,
«@nuxt/typescript-runtime»: «^2.0.0»,
«@nuxtjs/axios»: «^5.12.3»,
«@vue/test-utils»: «^1.1.1»,
«babel-jest»: «^26.6.3»,
«body-parser»: «^1.19.0»,
«bootstrap-vue»: «^2.20.1»,
«chartist»: «^0.11.4»,
«fibers»: «^5.0.0»,
«form-data»: «^3.0.0»,
«js-cookie»: «^2.2.1»,
«node-sass»: «^5.0.0»,
«nuxt»: «^2.14.10»,
«nuxt-ctk-date-time-picker»: «^2.1.1»,
«nuxt-property-decorator»: «^2.8.8»,
«sass-loader»: «^10.1.1»,
«vue»: «^2.6.12»,
«vue-analytics»: «^5.22.1»,
«vue-class-component»: «^7.2.6»,
«vue-cookie»: «^1.1.4»,
«vue-css-donut-chart»: «^1.3.0»,
«vue-jest»: «^3.0.7»,
«vue-property-decorator»: «^9.1.2»,
«vue-qrcode»: «^0.3.5»,
«vue-server-renderer»: «^2.6.12»,
«vue2-editor»: «^2.10.2»,
«vue2-google-maps»: «^0.10.7»,
«vuelidate»: «^0.7.6»,
«vuetify-datetime-picker»: «^2.1.1»,
«vuetify-google-autocomplete»: «^2.0.4»,
«vuex-module-decorators»: «^1.0.0»
>,
«release-it»: <
«git»: <
«changelog»: «git log —pretty=format:»* %s (%h)» $. $ «,
«requireCleanWorkingDir»: false,
«requireBranch»: false,
«requireUpstream»: true,
«requireCommits»: false,
«addUntrackedFiles»: false,
«commit»: true,
«commitMessage»: «Release $«,
«commitArgs»: [],
«tag»: true,
«tagName»: null,
«tagAnnotation»: «Release $«,
«tagArgs»: [],
«push»: true,
«pushArgs»: [
«—follow-tags»
],
«pushRepo»: «»
>
>,
«devDependencies»: <
«@nuxt/types»: «^2.14.12»,
«@nuxt/typescript-build»: «^2.0.3»,
«@nuxtjs/eslint-config»: «^5.0.0»,
«@nuxtjs/vuetify»: «^1.11.3»,
«@types/vuelidate»: «^0.7.13»,
«@types/webpack-env»: «^1.16.0»,
«babel-core»: «^6.26.3»,
«babel-eslint»: «^10.1.0»,
«eslint»: «^7.15.0»,
«jest»: «^26.6.3»,
«release-it»: «^14.0.0»,
«vue-browser-geolocation»: «^1.8.0»,
«vue-template-compiler»: «^2.6.12»
>
>

ok, good
but could i upgrade my webpack to v5 ?

No. Nuxt 2 is not currently compatible with Webpack 5.

ok, so should wait for nuxt 3 , right ?

Yes @YallaDealz 🙂 If any important feature introduces in feature releases of sass-loader, we might fork it but at the moment using latest possible for nuxt2 (which is v10)

Источник

import from ‘path’ throws an error #4

I’ve tried to implement this loader to load a global scss variable file in my nuxt project, but when I run npm run dev I get the following error:

(function (exports, require, module, __filename, __dirname) < import from ‘path’
^^^^^^
SyntaxError: Unexpected token import

Here is my nuxt.config.js:

Can you see what I am doing wrong? Seems like a simple setup but I can’t get past that error

The text was updated successfully, but these errors were encountered:

Hi @cbaxter713 , the error is not related to the package.

Try changing the first line to: const resolve = require(‘path’).resolve;

@cbaxter713 have you configured .babelrc in your project?

I have not. I am just using the nuxt-community/starter-template

This seems to me to be some node module definition, try to do as I suggested above.

What version of the node are you using?

I am using 8.9.4. It seems like your fix for the resolve declaration helped, but now I am having issues with node-sass loading as a dependency

What version of node should I be running? I am going to try a fresh nuxt build using:
vue init nuxt-community/starter-template `

Unless you suggest a different nuxt setup

but now I am having issues with node-sass loading as a dependency

Can you show me the error?

I started a fresh project just to get this running, and after implementing the setup for nuxt-sass-resource-loader, I get the following error:

ERROR in ./pages/index.vue Module not found: Error: Can’t resolve ‘sass-loader’ in ‘/Users/colinbaxter/repos/nuxt-basic/pages’ @ ./pages/index.vue 4:2-494 @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

Do I just need to add sass-loader as a dev dependency?

I install sass-loader, and I get:

npm WARN sass-loader@6.0.6 requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.

Install too node-sass

Right, this is the problem I ran into before. When I install node-sass I get the following output:

`> node-sass@4.7.2 install /Users/colinbaxter/repos/nuxt-basic/node_modules/node-sass

Источник

Hello.

Full text of the error:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'prependData'. These properties are valid: object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? } at validate (C:OSPaneldomainspizza-vue.locnode_modulessass-loadernode_modulesschema-utilsdistvalidate.js:104:11) at Object.loader (C:OSPaneldomainspizza-vue.locnode_modulessass-loaderdistindex.js:30:29)

package.json

  "name": "Pizza",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt -c client/nuxt.config.js",
    "build": "nuxt build -c client/nuxt.config.js",
    "start": "nuxt start -c client/nuxt.config.js",
    "generate": "nuxt generate",
    "test": "jest"
  },
  "dependencies": {
    "@nuxtjs/auth": "^4.9.1",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "fibers": "^5.0.0",
    "node-sass": "^5.0.0",
    "nuxt": "^2.14.6",
    "sass": "^1.32.5",
    "sass-loader": "^10.1.1"
  },
  "devDependencies": {
    "@nuxtjs/style-resources": "^1.0.0",
    "@nuxtjs/vuetify": "^1.11.2",
    "@vue/test-utils": "^1.1.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^26.5.0",
    "jest": "^26.5.0",
    "vue-jest": "^3.0.4"
  }
}

nuxt.config.js

import colors from 'vuetify/es5/util/colors'

export default {
  srcDir: __dirname,

  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    titleTemplate: '%s - Pizza',
    title: 'Pizza',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [
    '~/assets/frontend/frontend.scss',
  ],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
  ],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    '@nuxtjs/style-resources',
    '@nuxtjs/axios',
    '@nuxtjs/auth',
  ],
  styleResources: {
    //sass: [],
    scss: [
      '~/assets/frontend/frontend.scss',
    ],
    //less: [],
    //stylus: []
  },

  axios: {
    baseURL: "http:localhost:8000",
    credentials: true
  },

  auth: {
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/login',
      home: '/'
    },
    strategies: {
      local: {
        endpoints: {
          login: { url: '/login', method: 'post', propertyName: false },
          user: { url: '/api/user', method: 'get', propertyName: false }
        },
        tokenRequired: false,
        tokenType: false
      }
    },
    localStorage: false
  },

  // Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
  }
}

File .scss doesn’t see.

Also, scss does not work in the component.

<style lang="scss">
  .headline {
    color: green;
  }
</style>

The nuxt documentation says that you just need to install sass and sass-loader, but this does not work, it gives an error.
The sass-loader documentation does not contain this information either.

How fix it?

tags: npm i / npm run dev

Module build failed: Error: `sass-loader` requires `node-sass` >=4. Please install a compatible version.
    at Object.sassLoader (C:Users12915DesktopqymedSurgPmsnode_modulessass-loaderlibloader.js:31:19)

npm install sass-loader -D
npm install node-sass -D
npm rebuild node-sass



  


                       
  



Reference link:  http://www.manongjc.com/detail/14-vysyvuuztezseyr.html
　　　　　 https://www.zengjunpeng.com/?id=208

Intelligent Recommendation

More Recommendation

Hey 😍

Want to help the DEV Community feel more like a community?

Head over to the Welcome Thread and greet some new community members!

It only takes a minute of your time, and goes a long way!