Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make the indentedSyntax option a bit smarter. #196

Conversation

timmfin
Copy link
Contributor

@timmfin timmfin commented Dec 10, 2015

Instead of requiring loader config to set sass?indentedSyntax to compile whitespace significant Sass files, this change will automatically set it for you if necessary (when the current file is a SASS file).

This should make loader config a bit easier, because now you won’t need to have separate loaders for SCSS And SASS. For example:

loaders = [{
   test: /\.scss$/,
   loader: ExtractTextPlugin.extract("style","css!sass")
}, {
  test: /\.sass$/,
  loader: ExtractTextPlugin.extract("style","css!sass?indentedSyntax")
}]

// BECOMES

loaders = [{
  test: /\.(scss|sass)$/,
  loader: ExtractTextPlugin.extract("style","css!sass")
}]

Additionally this has the side benefit of enabling SCSS <-> SASS interop in some advanced cases. Without this, it wasn’t possible for my sprockets-directive-loader project to work when a SASS file //= requireed a SCSS file. That’s because you would have had to set indentedSyntax on the loader, and that would have been “passed-on” (via css?importLoaders=*) to an SCSS file, causing its compile to fail.

So with this change, this will now work for a mix of SCSS and SASS files:

loaders = [{
  test: /\.(scss|sass)$/,
  loader: ExtractTextPlugin.extract("style", "css?sourceMap&importLoaders=2!sprockets-directive!sass?sourceMap")
}]

Instead of forcing loader config to set `sass?indentedSyntax` to
compile whitespace significant Sass files, automatically set it if
necessary (if the current file is a SASS file).

This should make loader config a bit easier, because now you won’t need
to have separate loaders for SCSS And SASS.

Additionally this has the side benefit of enabling SCSS <-> SASS
interop in some advanced cases. Without this, it wasn’t possible for my
[sprockets-directive-loader](https://github.com/timmfin/sprockets-direct
ive-loader) project to work when a SASS file `//= require`ed a SCSS
file. That’s because you would have had to set `indentedSyntax` on the
loader, and that would have been “passed-on” (via
`css?importLoaders=1`) to the SCSS file, causing its compile to fail.

So with this change, this will now work for a mix of SCSS and SASS
files:

```
{
test: /\.(scss|sass)$/,
loader: ExtractTextPlugin.extract("style",
"css?sourceMap&importLoaders=2!sprockets-directive!sass?sourceMap")
}
```
lutzk added a commit to lutzk/sass-loader that referenced this pull request Dec 17, 2015
jhnns added a commit that referenced this pull request Mar 3, 2016
…-option

Make the `indentedSyntax` option a bit smarter.
@jhnns jhnns merged commit 0fa774f into webpack-contrib:master Mar 3, 2016
@jhnns
Copy link
Member

jhnns commented Mar 3, 2016

Seems reasonable, thx 👍

@Kadrian
Copy link

Kadrian commented Mar 3, 2016

Great change, thanks very much! 👍

@timmfin
Copy link
Contributor Author

timmfin commented Mar 3, 2016

💃💃, thanks for merging!

jhnns added a commit that referenced this pull request Mar 12, 2016
Thus we are testing #196 implicitly
@jhnns
Copy link
Member

jhnns commented Mar 12, 2016

Shipped with v3.2.0

@aaugustin
Copy link

This is very cool. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants