Questions tagged [sass-loader]
435 questions
0
votes
1 answer
React Starter Kit sass-loader performance
While working on dev using npm run start everything seems to be fine in terms of webpack build speeds, but on production, when running npm run build it takes more than 5min to build the the app. I compared the build speed to the older versions of…

RihardsPo
- 151
- 2
- 11
0
votes
1 answer
Can't set includePaths when using ExtractTextPlugin and sass-loader
I'm using the newest version of webpack and extract-text-webpack-plugin. I am trying to following the instructions to Export Sass or LESS. I've been reading questions and answers around this all day and still have not found anything that works. I…

flyingL123
- 7,686
- 11
- 66
- 135
0
votes
1 answer
use mdc sass files in angular-cli projects
I have a project using angular-cli. I am using mdc components/. I want to import individual component's sass files. For this,
1) I have changed the default styleExt using this command
ng set defaults.styleExt scss
2) Renamed the file style.css to…

Sunil Garg
- 14,608
- 25
- 132
- 189
0
votes
0 answers
SCSS compiling with !default value even though it is set previously
I'm working on a Vuejs project and using a framework for the styles. I am setting a variable before importing the framework where I know the variable has !default, but the !default value is still what is compiled when I run it.
// My styles.scss…

Jared Jones
- 228
- 2
- 9
0
votes
1 answer
Using ExtractTextPlugin for Webpack, how do you not extract css and create an empty file with a flag?
Basically I want to extract css in production, but I want to leave it in the JavaScript file in development mode.
This is so I can have the sourcemap working which shows the sass files used.
I want to be able to have:

anonfg4rtz4aetae4tata4t
- 9
- 1
- 3
0
votes
1 answer
In Webpack 3 how can I generate a different CSS URL when built?
I am trying to output a different URL for my background images when my project is built.
My current CSS image path is:
./src/components/assets/images....
What I want when built:
/images/default-source/images/icon.png
I have tried different things…

Rob Fyffe
- 719
- 1
- 8
- 22
0
votes
1 answer
React-redux app is no longer auto updating
I had a react-redux app working perfectly fine with the UI being auto updated after every file change, then I decided to plugin sass into my app and the auto-reloading stopped working. So in order to get sass in my app, I had to install sass-loader,…

Christopher Stephenson
- 492
- 11
- 20
0
votes
1 answer
Simplify SCSS @import paths with WebPack 2
I currently have a project setup that uses the sass-loader WebPack plugin. This means that we can easily import SCSS from node_modules using the following:
@import "~bootstrap/scss/mixins/breakpoints";
Is there a way I can create a shortcut like…

josef.van.niekerk
- 11,941
- 20
- 97
- 157
0
votes
1 answer
webpack sass-loader not generating css
I can't figure out how to render css with the webpack sass-loader.
App.js file:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Test from "./Test";
class App extends Component {
render() {
…

SenperChan
- 1
- 1
0
votes
1 answer
Webpack is not compiling/including my scss files in development
I am developing a react app with webpack. My problem is that my scss files are either not compiled properly or not included in my development mode. But after building for production, those styles are included. This issue is very confusing. Please…

Vineet 'DEVIN' Dev
- 1,183
- 1
- 10
- 35
0
votes
1 answer
Using aliases with sass-loader to avoid relative path mess
I have a .scss file in which I'm using a backgorund image (background-image: url('../../../image.png')). The file-loader webpack plugin detects that image and copies it when I'm building my app, which is great.
The problem is that I have quite some…

alexandernst
- 14,352
- 22
- 97
- 197
0
votes
2 answers
Webpack sass-loader fails to compile sass stylesheet imported into a react jsx document: Unexpected character '@'
I am using Webpack 2.5.1, React 15.5.4.
I am trying to use Bootstrap _utilities.scss in a react project. And
Webpack reports an error when I try to compile the document because it imports other sass partials using @import statement.
This is the…

blaze
- 139
- 1
- 3
- 13
0
votes
1 answer
Cannot extract multiple scss files to one css file
It seems that I don't know the way how to extract multiple .scss files to a one .css file. After building my /dist folder constains only .js files. I followed many guides, but non of them works. Here is my webpack.config.js
module.exports = {
…

Humberd
- 2,794
- 3
- 20
- 37
0
votes
1 answer
webpack + sass-loader: Invalid CSS after "...-width: $small)": expected "{", was ";"
I've been looking for some answer to this mystical error i keep getting, and i dont really know where else to look. Apparently, there's an offending media query selector, but it seems as normal as any other media query example i had found so far.…

Throoze
- 3,988
- 8
- 45
- 67
0
votes
1 answer
Linter showing "no-unused-vars" when importing a style file for webpack
I'm using linter-eslint package for atom with a React project. I'm using webpack as the bundler, and I import sass styles to be processed during the building process.
When I import the style in the entry file, I don't use it, but I need to import it…

Daniel Reina
- 5,764
- 1
- 37
- 50