https://github.com/wayou/webpack-sass-import-issue
imports not processed by webpack in sass issue
https://github.com/wayou/webpack-sass-import-issue
Last synced: 7 months ago
JSON representation
imports not processed by webpack in sass issue
- Host: GitHub
- URL: https://github.com/wayou/webpack-sass-import-issue
- Owner: wayou
- License: mit
- Created: 2018-07-26T12:34:30.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T11:36:08.000Z (almost 2 years ago)
- Last Synced: 2025-01-23T04:15:06.372Z (9 months ago)
- Language: JavaScript
- Size: 161 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Loaders based on [preprocess](https://github.com/jsoverson/preprocess) not working with sass file when there are imports.
The problem:
`@import`s not processed by wepback in sass file.
e.g.
index.jsx
```js
import './index.scss';
```
index.scss
```css
@import './other.scss'
```
other.scss
```css
/* @if condition */
body{
color:red
}
/* @endif */
```
Preprocess logic wont work in `other.scss` file.
the reason is imports in sass file are handled by sass it's self, not webpack.
For more info, see the discussion https://github.com/webpack-contrib/sass-loader/issues/164.
This repo demonstrate the problem when using a wrapped [preprocess](https://github.com/jsoverson/preprocess) loader [@umu-team/preprocess-loader](https://github.com/umu-team/preprocess-loader).
In order to avoid this, we need
- place loads after `sass-loader`. This ensures the imported sass files are process and we get full source when in other loaders
- instead of `//`, using `/**/` style comment in sass file. Because the former will removed by sass-loader.