Questions tagged [sass-loader]

435 questions
6
votes
1 answer

Webpack SCSS Image URL Links Broken on Nested Routes

Here is my directory structure: - public - src - app.js - assets - images - logo-b-green.png - stylesheets - nav.scss And: // webpack.config.js module.exports = { entry: './src/app.js', output: { path: './public', …
Micah
  • 1,676
  • 16
  • 23
6
votes
2 answers

Invalid CSS error for sass-loader

My app.scss .tes { color: red; } The output error when I execute ./node_modules/.bin/webpack ERROR in ./~/css-loader!./~/sass-loader?indentedSyntax!./www/assets/app.scss Module build failed: .tes { ^ Invalid CSS after ".tes {":…
ridermansb
  • 10,779
  • 24
  • 115
  • 226
5
votes
1 answer

webpack sass-loader not using tsconfig path

Sass-loader seem to not use path (alias) declared in the typescript configuration. So a simple @use or @import give a not found error. Webpack resolve: { plugins: [new TsconfigPathsPlugin()], tsconfig "paths": { "Components/*":…
Jerome
  • 603
  • 2
  • 5
  • 15
5
votes
0 answers

SASS @Use and webpack aliases... can't find stylesheet

I have an issue with the @use rule when I use Webpack aliases. In the partial theme.scss, I try to use a mixin from the…
Jerome
  • 603
  • 2
  • 5
  • 15
5
votes
1 answer

Storybook React SassError: expected "{"

Trying to setup a Storybook using .scss file. Following the doc > // .storybook/main.js const path = require('path'); // Export a function. Accept the base config as the only param. module.exports = { webpackFinal: async (config, { configType })…
callmemath
  • 8,185
  • 4
  • 37
  • 50
5
votes
5 answers

nuxt vuetify gives SassError: Expected identifier

I'm using Nuxt 2.15.4 and nuxt/vuetify 1.11.3 my project was working fine, but when i move it to a new server at build I got these errors: this is my package.json file { "name": "myproject", "version": "1.0.0", "private": true, "scripts":…
Mojtaba Barari
  • 1,127
  • 1
  • 15
  • 49
5
votes
3 answers

Ways to speed up scss during watch compiling in Webpack

TLDR; Scroll to the bottom for the answer or combine both Webpack and Dart Sass VM. https://github.com/sass/dart-sass/releases/ Not sure if anyone else has run into this issue, but my first save while the files are being watched can take up 6-7…
RMH
  • 821
  • 2
  • 15
  • 38
5
votes
2 answers

Yarn 2 and dart sass with create react app

I've been trying to update a Create React App to use yarn 2 and plug and play (PNP). When I do use nodeLinker: node-modules in the .yarnrc.yml, I can successfully start the dev-server. Without it, I end up with ./src/App.scss…
wegry
  • 7,046
  • 6
  • 39
  • 59
5
votes
1 answer

node-sass installation error: couldn't find package "error-ex"

When I tried to install node-sass as a dependency for sass-loader for a react app using yarn, I got the following error: yarn add v1.22.0 [1/4] Resolving packages... warning node-sass > request@2.88.2: request has been deprecated, see…
ahrooran
  • 931
  • 1
  • 10
  • 25
5
votes
2 answers

Why Webpack's sass-loader is minimizing CSS in production mode?

I was setting the Webpack loaders config for .css and .scss files, I noticed that when using --mode production I'm getting minimized CSS as the final output without even using a minimizer explicitly, here's my loaders config: { // Match .css or…
Pierre
  • 12,468
  • 6
  • 44
  • 63
5
votes
1 answer

Cannot import stylesheets from node_modules without tilde (~)

I'm trying to create a simple web app with material-components-vue and vue-cli with webpack, however, I found out that I cannot import stylesheets from node_modules without a preceding ~. I have tried several webpack/vue-cli configs, and ended up…
ummw
  • 165
  • 2
  • 6
5
votes
1 answer

Webpack file-loader with sass-loader

I am new to nodejs and get a problem when trying to use sass with it. The following information is just fictional, but it represents the actual condition. THE SCENARIO: I have the following folder structure: frontend/ - scss/ - style.scss -…
Ari
  • 4,643
  • 5
  • 36
  • 52
5
votes
1 answer

sourceMap with sass-loader and postcss-loader in Webpack

I'm trying to enable sourceMaps in webpack but there seems to be a problem with sass-loader and postcss-loader combination. With both sass-loader and postcss-loader enabled my console shows "no source": But when I disable postcss-loader the…
Tomarz
  • 1,097
  • 4
  • 15
  • 25
5
votes
3 answers

Webpack sass loader resolve absolute path

I want to be able to use absolute paths in @import statements. Something like: @import '/templates/common/variables' However, sass seems to resolve it as an absolute url within my filesystem. I want it to look in my project folder. Eg. my file is…
Nemo64
  • 2,535
  • 3
  • 20
  • 24
5
votes
2 answers

background-image URL not loading using Webpack

Basically I am trying to have an image display in the background of a container, but it isn't loading. I have tried various paths as it isn't entirely clear to me what the URL needs to be relative to: the package.json, the webpack.config.js, the…
cjones
  • 8,384
  • 17
  • 81
  • 175