bholloway / resolve-url-loader

Webpack loader that resolves relative paths in url() statements based on the original source file
563 stars 70 forks source link

sass-loader@>=6.0.0 #45

Closed bholloway closed 7 years ago

bholloway commented 7 years ago

A large change, intended as non-breaking.

Supersedes #31, #41, #44. Hopefully fixes #36, #42.

Will probably be a major version bump to play it safe: discuss.

Judahmeek commented 7 years ago

Yarn won't let me pull af4b4fc because it comes after the latest version bump 1.6.1. Would you mind adding another version bump to make things more convenient?

This PR definitely has my vote, btw.

bholloway commented 7 years ago

@Judahmeek I prefer not to mess with pre-release because of how easy it is to break latest dist-tag.

I have reports from others that this is a good fix, so I will probably release on that basis. (There are always unexpected issues that need to be patched following.) Anyone can please let me know if they object to that plan.

bholloway commented 7 years ago

There is still an incompatibility with webpack@~1.0.0 and node-sass@>=4.0.0. I have updated dependencies (in case it is fixed in source-maps) but to no avail.

According to this comment by @jhnns it is a known issue. However it would be nice if I could get independent confirmation that it is not just my setup.

In the absence of further information I intend to adjust the readme.md to give guidance that users with Webpack 1 and SASS loader may be limited to node-sass@~3.0.0, and to then release. Again let me know any objections/suggestions.

bholloway commented 7 years ago

Published as 2.0.0. Let me know any problems.

BerndWessels commented 7 years ago

@bholloway Just updated to sass-loader@6.0.2 and resolve-url-loader@2.0.0 and its breaking :(

Before it worked just fine with sass-loader-5.0.1 and resolve-url-loader-1.6.1.

Any idea how to fix it?

This is my webpack config:

config.module.rules.push(
      {
        test: /(\.scss|\.css)$/,
        exclude: [/node_modules/, /normalize.css/, /icomoon/],
        loader: `style-loader!css-loader?{"sourceMap":true,"modules":true, "importLoaders":2, "localIdentName": "[path]---[name]---[local]---[hash:base64:5]"}!postcss-loader!resolve-url-loader!sass-loader?{"sourceMap":true,"includePaths":["${themePath}"]}`
      }

And this is the error (I get multiple of these errors, basically for each import):

ERROR in ./~/css-loader?{"sourceMap":true,"modules":true, "importLoaders":2, "localIdentName": "[path]---[name]---[local]---[hash:base64:5]"}!./~/postcss-loader!./~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["C:/git/microsite-template-react/micros
ite/themes/fraedom"]}!./src/components/date-picker/days/styles.scss
Module build failed: SyntaxError: Bad string at line 1 column 44 of the JSON5 data. Still to read: "microsite-template-r"
    at error (C:\git\microsite-template-react\microsite\node_modules\json5\lib\json5.js:56:25)
    at string (C:\git\microsite-template-react\microsite\node_modules\json5\lib\json5.js:268:13)
    at value (C:\git\microsite-template-react\microsite\node_modules\json5\lib\json5.js:487:20)
    at array (C:\git\microsite-template-react\microsite\node_modules\json5\lib\json5.js:417:36)
    at value (C:\git\microsite-template-react\microsite\node_modules\json5\lib\json5.js:484:20)
    at object (C:\git\microsite-template-react\microsite\node_modules\json5\lib\json5.js:459:35)
    at value (C:\git\microsite-template-react\microsite\node_modules\json5\lib\json5.js:482:20)
    at Object.parse (C:\git\microsite-template-react\microsite\node_modules\json5\lib\json5.js:508:18)
    at parseQuery (C:\git\microsite-template-react\microsite\node_modules\sass-loader\node_modules\loader-utils\lib\parseQuery.js:20:16)
    at Object.getOptions (C:\git\microsite-template-react\microsite\node_modules\sass-loader\node_modules\loader-utils\lib\getOptions.js:8:10)
    at normalizeOptions (C:\git\microsite-template-react\microsite\node_modules\sass-loader\lib\normalizeOptions.js:21:37)
    at Object.sassLoader (C:\git\microsite-template-react\microsite\node_modules\sass-loader\lib\loader.js:40:21)
 @ ./src/components/date-picker/days/styles.scss 4:14-418 13:2-17:4 14:20-424
 @ ./src/components/date-picker/days/component.js
 @ ./src/components/date-picker/component.js
 @ ./src/components/date-input/component.js
 @ ./src/containers/demo-page/component.js
 @ ./src/component.js
 @ ./src/root.client.js
 @ multi babel-polyfill react-hot-loader/patch webpack-hot-middleware/client ./src/root.client.js

And these are my package versions:

+-- autoprefixer@6.7.5
+-- babel-core@6.23.1
+-- babel-loader@6.3.2
+-- babel-plugin-react-intl@2.3.1
+-- babel-plugin-transform-class-properties@6.23.0
+-- babel-plugin-transform-object-rest-spread@6.23.0
+-- babel-polyfill@6.23.0
+-- babel-preset-es2015@6.22.0
+-- babel-preset-latest@6.22.0
+-- babel-preset-react@6.23.0
+-- bundle-loader@0.5.4
+-- classnames@2.2.5
+-- clean-webpack-plugin@0.1.15
+-- connect-history-api-fallback@1.3.0
+-- connected-react-router@4.0.0-beta.4
+-- copy-webpack-plugin@4.0.1
+-- css-loader@0.26.1
+-- ejs@2.5.6
+-- exports-loader@0.6.3
+-- express@4.14.1
+-- extract-text-webpack-plugin@2.0.0-rc.3
+-- file-loader@0.10.0
+-- glob@7.1.1
+-- history@4.5.1
+-- html-loader@0.4.4
+-- html-webpack-plugin@2.28.0
+-- imports-loader@0.7.0
+-- intl@1.2.5
+-- json-loader@0.5.4
+-- moment@2.17.1
+-- node-sass@4.5.0
+-- normalize.css@5.0.0
+-- null-loader@0.1.1
+-- postcss-loader@1.3.1
+-- ramda@0.23.0
+-- raw-loader@0.5.1
+-- react@15.4.2
+-- react-dom@15.4.2
+-- react-history@0.18.2
+-- react-hot-loader@3.0.0-beta.6
+-- react-intl@2.2.3
+-- react-intl-po@2.0.1
+-- react-redux@5.0.3
+-- react-router@4.0.0-beta.6
+-- react-router-dom@4.0.0-beta.6
+-- redux@3.6.0
+-- redux-observable@0.13.0
+-- request@2.79.0
+-- reselect@2.5.4
+-- resolve-url-loader@2.0.0
+-- rimraf@2.6.0
+-- rxjs@5.2.0
+-- sass-loader@6.0.2
+-- style-loader@0.13.1
+-- tether@1.4.0
+-- url-loader@0.5.7
+-- webpack@2.2.1
+-- webpack-dev-middleware@1.10.1
+-- webpack-hot-middleware@2.17.0
`-- whatwg-fetch@2.0.2
bholloway commented 7 years ago

Strange that resolve-url-loader is in your config but not in your error message.

The error message should show all the loaders.

Maybe it is truncated on this device I'm reading on.

BerndWessels commented 7 years ago

@bholloway Hi thanks, no worries.

It seems I've got a problem with my sass-loader "includePaths":["${themePath}"] which is most likely unrelated to this.