Stack Overflow
Stack Overflow

Questions tagged [sass-loader]

435 questions
8
votes
2 answers

Invalid CSS after " ": expected 1 selector or at-rule, was "{"

I am trying out Vue with SASS but I run into a problem ben using npm run build. I use webpack sass-loader. Can anyone help me out here? I suspect the problem is somewhere in my webpack config, but I can not find the problem. Error output: ERROR in…
Raf Rasenberg
  • 534
  • 2
  • 14
  • 27
8
votes
1 answer

Unmet peer dependency webpack@3.6.0

I am trying to run npm install on a project and it is unable to resolve webpack package. I have followed most of the other questions answers found in google and on here. I have completely cleaned computer of nodejs + npm files, again by following…
davidmaceachern
  • 171
  • 1
  • 2
  • 6
8
votes
0 answers

How to resolve image path in sass file with sass-loader and resolve-url-loader

I have read sass-loader and resolve-url-loader description but still i can't understand why sass-loader can't resolve image path (url) in sass file. please help me how can figure out! process.noDeprecation = true; module.exports = { entry: { …
Moxart
  • 81
  • 2
8
votes
3 answers

Is it possible to inject NODE_ENV param into sass file using Webpack & sass loader?

I'm trying to inject NODE_ENV into a sass file, so I can have different output for dev/prod env, and have a sass function that has a condition like that inside it: @if (NODE_ENV == 'prod') {} my webpack.config looks like this: module: { loaders:…
Dima Feldman
  • 708
  • 1
  • 10
  • 17
7
votes
0 answers

React + Storybook + Sass: SassError: expected "{"

I'm having issues trying to make Storybook read my .scss files. I've tried a bunch of different possible solutions, but none of those solved the problem. Here is the error that always pop up: SassError: SassError: expected "{". ╷ 1 │ var api =…
Cesar Antunes
  • 81
  • 4
7
votes
1 answer

data option in sassOptions stopped working in gatsby-plugin-sass after upgrading to v3 and replaced node-sass with sass

I decided to remove node-sass from my gatsby project and use sass instead. I followed what is mentioned here for v3. I removed node-sass and now I have these versions in my package.json: "gatsby-plugin-sass": "3.1.0", "sass": "1.32.5", I need to be…
Makis K.
  • 877
  • 2
  • 9
  • 16
7
votes
0 answers

Webpack - sass-loader can't figure out how includePaths work

I am a bit stuck, and right now I am at the verge of a breakdown. Someone, PLEASE enlighten me what is happening here. I am playing around with this for like 4 hours now, and can't seem to find out why this is happening! TL/DR: Why is it, that…
Adam Baranyai
  • 3,635
  • 3
  • 29
  • 68
7
votes
4 answers

url-loader / file-loader breaking relative paths in css output using webpack

I am using webpack with some plugins and loaders to take my src/ folder and build a dist/ folder. url-loader (which falls back to file-loader when images are larger than a specific limit) is outputting images it finds in my html and scss files to…
Jordan Walker
  • 550
  • 1
  • 5
  • 17
7
votes
1 answer

How to add `includePaths` to Sass loader with Webpacker

I overrode the sass-loader configuration to include the node_modules path: // config/webpack/environment.js const { environment } = require('@rails/webpacker') environment.loaders.prepend('sass', { test: /\.(css|scss|sass)$/, use: [{ …
heroxav
  • 1,387
  • 1
  • 22
  • 65
7
votes
2 answers

Webpack2 not understanding @import statement in my SASS files (How to compile SASS with webpack2?)

Using Webpack 2 and sass-loader 4.11 webpack --config webpack.config.js Here is my webpack.config.js var path = require('path'); var sass = require("./sass/lifeleveler.scss"); module.exports = { entry: './dist/main.js', output: { …
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
6
votes
2 answers

how to ensure node-sass and sass-loader versions are compatible?

My Nodejs version is v16.16.0 and npm version is 8.11.0. and errors keep coming saying Is there any way to upgrade sass-loader? (Also, when npm run serve is run this error comes up Syntax Error: Error: Node Sass version 7.0.1 is incompatible with…
user529674
  • 89
  • 1
  • 5
6
votes
1 answer

Webpack 5 error "Uncaught Error: Module parse failed: Unexpected character '@'" when loading fonts

After I added sass-loader to my webpack configuration, I'm getting a build error when using this node module @fontsource/roboto import "@fontsource/roboto"; // this is in index.tsx Uncaught Error: Module parse failed: Unexpected character '@'…
aabuhijleh
  • 2,214
  • 9
  • 25
6
votes
1 answer

Sass-loader not replacing variables?

Not too long ago I made a project that used a combination of SASS variables and CSS custom properties. I defined my Sass variables and then used those to create my CSS custom properties. Everything worked great. Now I'm trying to do the exact…
Daniel D
  • 121
  • 6
6
votes
1 answer

How do I get postcss-loader, postcss-cssnext and sass-loader to work together in webpack?

This is my Webpack configs for scss/css files. ... { test: /\.s?css$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 2 } }, { loader: 'postcss-loader', options: { ident:…
hwkd
  • 2,411
  • 3
  • 18
  • 27
6
votes
4 answers

ReactJS - including other scss files in main.scss

In my reactJS application - I am including all .scss files in one main.scss file - under styles folder in src folder. I have the following webpack configuration. tried including main.scss file directly in my main component - getting error at…
monkeyjs
  • 604
  • 2
  • 7
  • 29
1 2
3
…
28 29