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