includePaths do not work with Webpack 2 #366

asolopovas · 2017-02-07T16:30:32Z

Hi everyone,
I am using Windows 10 x64 and Webpack 2, with sass-loader version 4.1.1 , but can't use standard syntax

use: [
    {loader: 'style-loader'},
    {
        loader: 'css-loader',
        options: {
            sourceMap: true
        }
    },
    {
        loader: 'sass-loader',
        options: {
            includePaths: [
                path.resolve(__dirname, 'vendor/zurb/foundation/scss'),
                path.resolve(__dirname, 'node_modules/motion-ui/src'),
                path.resolve(__dirname, 'resources/assets/sass')
            ],
            sourceMap: true
  
        }
    }
]

The only way to get this to work is to use LoaderOptionsPlugin

new webpack.LoaderOptionsPlugin({
    options: {
        context: '/', // <- putting this line right under "options" did the trick
        sassLoader: {
            includePaths: [
                path.resolve(__dirname, 'vendor/zurb/foundation/scss'),
                path.resolve(__dirname, 'node_modules/motion-ui/src'),
                path.resolve(__dirname, 'resources/assets/sass')
            ]
        }
    }
})

Otherwise it throws an error saying can't import 'foundation' and so on. LoaderOptionsPlugin stops to work as of version 5.0.

The text was updated successfully, but these errors were encountered:

pamtbaau · 2017-02-07T19:11:09Z

@asolopovas Same issue here after upgrading to 5.0.0. Your suggested solution did not fix mine elas... Rolled back to 4.1.1 and issue disappeared.

asolopovas · 2017-02-07T19:21:49Z

@pamtbaau solution works on 4.1.1, I am not suggesting that it does on 5. But version 4.1.1 does not work with options.includePaths either.

pamtbaau · 2017-02-07T19:30:43Z

@asolopovas includePaths work fine for me in 4.1.1:
new webpack.LoaderOptionsPlugin({ options: { sassLoader: { includePaths: [ path.resolve(__dirname, '../src/app/assets/sass'), path.resolve(__dirname, '../node_modules/bootstrap/scss') ] } } })

asolopovas · 2017-02-07T19:49:54Z

@pamtbaau if you read through documentation you will see that it should be working without LoaderOptionsPlugin, that's the point I am trying to make.

skipjack · 2017-02-07T20:16:54Z

+1 I'm running into this as well -- on 5.0.0 even the suggested webpack.LoaderOptionsPlugin solution doesn't seem to be working.

jhnns · 2017-02-07T21:44:05Z

The LoaderOptionsPlugin should not be necessary, see my comment here.

We have a test for includePaths. It should work the way you described it. Could you create a minimal example repo that reproduces the error?

asolopovas · 2017-02-07T23:52:34Z

I will tomorrow

asolopovas · 2017-02-09T15:24:04Z

@jhnns here you go I have created two webpack configs one that works second one that fails
https://github.com/asolopovas/sass-loader-test

coolhihi · 2017-02-11T14:39:02Z

Thank you. I use LoaderOptionsPlugin and rollback sass-loader to 4.1.1. It work.

jhnns · 2017-02-13T14:50:22Z

@asolopovas with sass-loader 4.1.1 and webpack 2.2.1, both config examples work.

With sass-loader 5.0.1, webpack.config.js does not work because the sass-loader doesn't read the config from the webpack options object anymore. You don't need to use the LoaderOptionsPlugin with sass-loader 5.0.0 anymore. Just specify the loader options directly. Thus, webpack.config.error.js does work.

jhnns · 2017-02-13T14:52:38Z

Also check out our tests.

asolopovas · 2017-02-13T15:08:21Z

@jhnns I have tried webpack 2.2.1 with both sass-loader@5.0.0 and sass-loader@5.0.1 both throw an error if I place includePaths into options of sass loader like that:

                    {
                        loader: 'sass-loader',
                        options: {
                            includePaths: [
                                path.resolve(__dirname, 'vendor/zurb/foundation/scss'),
                                path.resolve(__dirname, 'node_modules/motion-ui/src'),
                                path.resolve(__dirname, 'resources/assets/sass')
                            ],
                            sourceMap: true
                        }
                    }

Which has not worked in the repository provided in webpack.config.error.js, I tested it on windows 10 x64 machine so clearly something fails.

skipjack · 2017-02-13T15:12:55Z

@jhnns yea I'm not dependent on this issue anymore as our infrastructure changed, but, when I was, I tested v5.0.0 with both the options and using the LoaderOptionsPlugin (which I know you said doesn't work intentionally) and using just options failed as well iirc.

jhnns · 2017-02-13T17:25:43Z

Ok, now I can reproduce this error on Windows (doesn't happen on macOS):

ERROR in E:/temp/sass-loader-test/~/css-loader?{"sourceMap":true}!E:/temp/sass-loader-test/~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["E://temp//sass-loader-test//~//foundation-sites//scss","E://temp//sass-loader-test//~//motion-ui//src","E://temp//sass-loader-test//resources//assets//sass"]}!../sass/app.scss
Module build failed: Error: "../../node_modules/foundation-sites/scss/foundation.scss" is not in the SourceMap.
    at BasicSourceMapConsumer.SourceMapConsumer_sourceContentFor [as sourceContentFor] (E:\temp\sass-loader-test\node_modules\source-map\lib\source-map-consumer.js:704:13)
    at SourceMapGenerator.<anonymous> (E:\temp\sass-loader-test\node_modules\source-map\lib\source-map-generator.js:235:40)
    at Array.forEach (native)
    at SourceMapGenerator_applySourceMap [as applySourceMap] (E:\temp\sass-loader-test\node_modules\source-map\lib\source-map-generator.js:234:32)
    at MapGenerator.applyPrevMaps (E:\temp\sass-loader-test\node_modules\postcss\lib\map-generator.js:146:22)
    at MapGenerator.generateMap (E:\temp\sass-loader-test\node_modules\postcss\lib\map-generator.js:194:46)
    at MapGenerator.generate (E:\temp\sass-loader-test\node_modules\postcss\lib\map-generator.js:297:25)
    at LazyResult.stringify (E:\temp\sass-loader-test\node_modules\postcss\lib\lazy-result.js:296:24)
    at E:\temp\sass-loader-test\node_modules\postcss\lib\lazy-result.js:233:27
    at process._tickCallback (internal/process/next_tick.js:103:7)
 @ ../sass/app.scss 4:14-151
 @ ./app.js
 @ multi ./app

It seems like node-sass is exporting source maps with forward slashes (which are also valid on Windows). Webpack's source map module, however, stores backslash paths. That's why the source maps can not be resolved.

I can fix this in sass-loader by applying path.normalize on all source map paths.

Next time, please always post the actual error message including the stack trace.

asolopovas · 2017-02-13T18:28:38Z

@jhnns next time I will. Thanks for reopening

- Make all source map paths relative to the entry file. This way we don't have to read the `context` option from the webpack config. - Fix source maps on Windows: node-sass returns POSIX paths, that's why we need to transform them back to native paths. This fixes an error on windows where the source-map module cannot resolve the source maps. See #366 (comment)

janusch · 2017-02-16T16:08:46Z

@jhnns Hey,
Thank you for maintaining this excellent and essential loader!
After updating to the latest version sass-loader@6 I recognized a regression.
In my project I am using a shared node_modules directory on a nfs file system. Now that you dropped webpack context npm packages using scss would throw an error:

ERROR in ./style/scss/global_bundle.scss
Module build failed: ModuleBuildError: Module build failed: Error: "/nfs/node_modules/bootstrap/scss/_alert.scss" is not in the SourceMap.
    at SourceMapConsumer_sourceContentFor [as sourceContentFor] (/nfs/node_modules/source-map/lib/source-map-consumer.js:704:13)
    at SourceMapGenerator.<anonymous> (/nfs/node_modules/source-map/lib/source-map-generator.js:235:40)
    at Array.forEach (native)
    at SourceMapGenerator_applySourceMap [as applySourceMap] (/nfs/node_modules/source-map/lib/source-map-generator.js:234:32)
    at MapGenerator.applyPrevMaps (/nfs/node_modules/postcss/lib/map-generator.js:146:22)
    at MapGenerator.generateMap (/nfs/node_modules/postcss/lib/map-generator.js:194:46)
    at MapGenerator.generate (/nfs/node_modules/postcss/lib/map-generator.js:297:25)
    at LazyResult.stringify (/nfs/node_modules/postcss/lib/lazy-result.js:294:24)
    at /nfs/node_modules/postcss/lib/lazy-result.js:231:27
    at /nfs/node_modules/webpack/lib/NormalModule.js:141:35
    at /nfs/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /nfs/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/nfs/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /nfs/node_modules/postcss-loader/index.js:153:13

reverting back to sass-loader@5.0.1 fixed the issue.
I am using resolve-url-loader@2.0.0 in the loader chain for sass.

If I can provide more information please let me know.
It would be very nice if this could get fixed, maybe by providing the context option in the options of sass-loader, so we can have a working sass-loader for both windows and nfs file systems?

jhnns · 2017-02-17T10:27:54Z

@janusch Could you try the latest sass-loader on master branch? If it's still not working, you can try to comment out these lines. Does it work then? How do the paths look like when they come from node-sass?

skipjack · 2017-02-22T18:18:35Z

@jhnns hey just tested options: { includePaths: [...] } with sass-loader@6.0.2 and it worked fine. I think this may be ok to close 👍 .

asolopovas · 2017-02-23T12:15:51Z

Still does not work on my machine.

ts-loader: Using typescript@2.2.1 and C:\vhosts\3oakdb\tsconfig.json
webpack built 60ee2be6571715396cd7 in 13194ms
Hash: 60ee2be6571715396cd7
Version: webpack 2.2.1
Time: 13194ms
     Asset     Size  Chunks                    Chunk Names
    app.js  3.82 MB       0  [emitted]  [big]  main
app.js.map   4.8 MB       0  [emitted]         main

ERROR in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?{"id":"data-v-d6ecb70a","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./resources/assets/js/views/notifications/Notification.vue
Module build failed: 
    @import "libs/animate.scss/animate.scss";
^
      File to import not found or unreadable: libs/animate.scss/animate.scss.
Parent style sheet: stdin
      in C:\vhosts\3oakdb\resources\assets\js\views\notifications\Notification.vue (line 32, column 1)
 @ ./~/vue-style-loader!./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?{"id":"data-v-d6ecb70a","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./resources/assets/js/views/notifications/Notification.vue 4:14-365 13:3-17:5 14:22-373
 @ ./resources/assets/js/views/notifications/Notification.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/App.vue
 @ ./resources/assets/js/App.vue
 @ ./resources/assets/js/app.js
 @ multi babel-polyfill webpack/hot/dev-server webpack-hot-middleware/client?reload=true ./app

ERROR in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?{"id":"data-v-08536deb","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js!./resources/assets/js/views/modules/styles/search.scss
Module build failed: 
@import "foundation";

.pagination {
  display: block;
  text-align: center;
  padding-left: 0;
  margin-bottom: rem-calc(10);
  margin-top: rem-calc(5);
  border-radius: 4px;
  font-size: 0;
  li {
    font-size: 16px;
    position: relative;
    display: inline-block;
    border: 1px solid #ddd;
    margin: -1px;
    a {
      display: block;
      padding: 6px 12px;
      line-height: 1.42857143;
      color: #428bca;
      text-decoration: none;
      background-color: #fff;
    }
    &.disabled {
      a {
        color: #777;
        cursor: not-allowed;
        background-color: #fff;
        border-color: #ddd;
      }
    }
    &.active > a {
      color: #fff;
      cursor: default;
      background-color: #428bca;
      border-color: #428bca;
    }
  }
}

^
      File to import not found or unreadable: foundation.
Parent style sheet: stdin
      in C:\vhosts\3oakdb\resources\assets\js\views\modules\styles\search.scss (line 1, column 1)
 @ ./~/vue-style-loader!./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?{"id":"data-v-08536deb","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js!./resources/assets/js/views/modules/styles/search.scss 4:14-294 13:3-17:5 14:22-302
 @ ./resources/assets/js/views/modules/Pagination.vue
 @ ./resources/assets/js/views/mixins/indexView.js
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/views/Items.vue
 @ ./resources/assets/js/views/Items.vue
 @ ./resources/assets/js/router.js
 @ ./resources/assets/js/app.js
 @ multi babel-polyfill webpack/hot/dev-server webpack-hot-middleware/client?reload=true ./app
webpack: Failed to compile.

Here is my webpack config just in case

const webpack = require('webpack')
const path = require('path')
// noinspection JSUnresolvedFunction
module.exports = {
    entry: [
        'babel-polyfill',
        'webpack/hot/dev-server',
        // ?reload=true enables full page reload on hmr failure
        'webpack-hot-middleware/client?reload=true',
        './app'
    ],
    context: path.resolve(__dirname, 'resources/assets/js'),
    output: {
        path: path.resolve(__dirname, 'public/js'),
        filename: 'app.js',
        publicPath: '/js/'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                enforce: 'pre',
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/
            },
            {
                enforce: 'pre',
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015'],
                    plugins: ['lodash']
                }
            },
            {
                test: /\.vue$/,
                use: ['vue']
            },
            {
                test: /\.scss$/,
                use: [
                    {loader: 'style'},
                    {
                        loader: 'css',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass',
                        options: {
                            sourceMap: true,
                            includePaths: [
                                path.resolve(__dirname, 'vendor/zurb/foundation/scss'),
                                path.resolve(__dirname, 'node_modules/motion-ui/src'),
                                path.resolve(__dirname, 'resources/assets/sass')
                            ]
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        alias: {
            'inputmask.dependencyLib': path.resolve(__dirname, 'node_modules/jquery.inputmask/extra/dependencyLibs/inputmask.dependencyLib/'),
            'inputmask': path.resolve(__dirname, 'node_modules/jquery.inputmask/dist/inputmask/inputmask/')
        },
        extensions: ['.webpack.js', '.web.js', '.tsx', '.ts', '.js']
    },
    resolveLoader: {
        moduleExtensions: ['-loader']
    },
    // watchOptions: {
    //     poll: 1000 // <-- it's worth setting a timeout to prevent high CPU load
    // },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        // new webpack.LoaderOptionsPlugin({
        //     options: {
        //         context: '/', // <- putting this line right under "options" did the trick
        //         sassLoader: {
        //             includePaths: [
        //                 path.resolve(__dirname, 'vendor/zurb/foundation/scss'),
        //                 path.resolve(__dirname, 'node_modules/motion-ui/src'),
        //                 path.resolve(__dirname, 'resources/assets/sass')
        //             ]
        //         }
        //     }
        // })
    ]
}

And my dependencies

  "dependencies": {
    "@types/elasticsearch": "^5.0.12",
    "@types/es6-promise": "^0.0.32",
    "autoprefixer": "^6.5.3",
    "axios": "^0.15.3",
    "babel-core": "^6.18.2",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.8",
    "babel-plugin-lodash": "^3.2.11",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-polyfill": "^6.22.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-3": "^6.22.0",
    "babel-register": "^6.18.0",
    "browser-sync": "^2.18.2",
    "chai": "^3.5.0",
    "css-loader": "^0.26.0",
    "elasticsearch": "^12.1.3",
    "eslint": "^3.10.2",
    "eslint-config-vue": "^2.0.1",
    "eslint-plugin-flowtype": "^2.25.0",
    "eslint-plugin-html": "^2.0.0",
    "eslint-plugin-vue": "^2.0.1",
    "inject-loader": "^3.0.0-beta4",
    "jasmine-core": "^2.5.2",
    "jquery.inputmask": "^3.3.3",
    "karma": "^1.4.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-webpack": "^2.0.2",
    "lodash": "^4.17.2",
    "motion-ui": "^1.2.2",
    "node-sass": "^4.0.0",
    "phantomjs-prebuilt": "^2.1.14",
    "sass-loader": "6.0.2",
    "source-map-loader": "^0.1.6",
    "string-mask": "^0.3.0",
    "style-loader": "^0.13.1",
    "ts-loader": "2",
    "typescript": "^2.1.4",
    "vue": "^2.1.3",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^11.1.0",
    "vue-router": "^2.2.0",
    "vue-style-loader": "^2.0.0",
    "vue-template-compiler": "^2.1.4",
    "vue-ts-loader": "^0.0.3",
    "vuex": "^2.1.2",
    "vuex-router-sync": "^4.1.1",
    "webpack": "^2.2.1",
    "webpack-dev-middleware": "^1.8.4",
    "webpack-hot-middleware": "^2.13.2"
  }

jhnns · 2017-02-23T18:57:16Z

@asolopovas Running your example repo and --config webpack.config.error.js with sass-loader 6.0.2 does not produce any errors:

IEUser@IE11Win7 MINGW32 /E/temp/sass-loader-test (master)
$ webpack --config webpack.config.error.js
(node:2612) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: c868b04bdf3742bebc1b
Version: webpack 2.2.1
Time: 6119ms
 Asset   Size  Chunks             Chunk Names
app.js  44 kB       0  [emitted]  main
   [0] ./app.js 43 bytes {0} [built]
   [1] E:/temp/sass-loader-test/~/css-loader?{"sourceMap":true}!E:/temp/sass-loader-test/~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["E://temp//sass-loader-test//~//foundation-sites//scss","E://temp//sass-loader-test//~//motion-ui//src","E://temp//sass-loader-test//resources//assets//sass"]}!../sass/app.scss 4.01 kB {0} [built]
   [2] E:/temp/sass-loader-test/~/css-loader/lib/css-base.js 1.51 kB {0} [built]
   [3] E:/temp/sass-loader-test/~/style-loader/addStyles.js 7.15 kB {0} [built]
   [4] ../sass/app.scss 1.12 kB {0} [built]
   [5] multi ./app 28 bytes {0} [built]

IEUser@IE11Win7 MINGW32 /E/temp/sass-loader-test (master)
$ npm ls sass-loader
sass-loader@1.0.0 E:\temp\sass-loader-test
`-- sass-loader@6.0.2

asolopovas · 2017-02-23T21:49:23Z

@jhnns I have updated my sass-loader-test and it confirms that something is not right, the problem seems to be with vue-loader or sass-loader as they don't seem to work together. If I import 'foundation' via app.js file things work fine, if I do import foundation from withing vue component things begin to break down. But most recent vue-loader still works fine with sass-loader@4.1.1 and LoaderOptionsPlugin with the same setup where I @import 'foundation' from within component.

jhnns · 2017-02-24T14:52:59Z

I don't know what the vue-loader is doing, but if I remove the sass-loader and just try to compile App.vue the same error is still there. So this is not related to the sass-loader.

jhnns · 2017-02-24T15:05:21Z

The sass-loader has its own loader pipeline. This configuration fixed the issue:

            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        scss: 'vue-style-loader!css-loader!sass-loader?' + JSON.stringify({
                            includePaths: [
                                path.resolve(__dirname, 'node_modules/foundation-sites/scss'),
                            ]
                        }), // <style lang="scss">
                        sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
                    }
                }
            }

asolopovas · 2017-02-24T19:06:28Z

A hack solution is definitely better then no solution thanks. Do you think it is the problem with vue-loader?

jhnns · 2017-02-28T12:55:20Z

A hack solution is definitely better then no solution thanks

Oh, I don't think that this is a hack solution. Since a vue file can host a lot of file types, it makes sense to have a dedicated loader pipeline because webpack's loader test algorithm wouldn't work here.

asolopovas · 2017-02-28T13:15:34Z

Well vue references the file format in style section and utilises sass-loader, so I do not see the reason why it can't read setting from inside sass-loader options, it's successfully does that from babel and typescript loaders. So it's either some adjustments could be done to sass-loader or to vue-loader and as I have noticed mac users do not complain about this issue. I might be wrong anyhow. It just feels wierd to concentrate includePaths inside vue loader pipeline.

…

On 28 Feb 2017, 12:55, at 12:55, Johannes Ewald ***@***.***> wrote: > A hack solution is definitely better then no solution thanks Oh, I don't think that this is a hack solution. Since a `vue` file can host a lot of file types, it makes sense to have a dedicated loader pipeline because webpack's loader `test` algorithm wouldn't work here. -- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: #366 (comment)

jhnns · 2017-02-28T13:28:50Z

If you have a .babelrc or a tsconfig.json inside your root folder, they are reading the config from these files. But this is loader specific since the tools behind these loaders (babel and typescript) have the same style of configuration. It doesn't apply to all loaders.

jhnns · 2017-03-02T11:33:58Z

This is my config and it's working with your sass-loader-test repository

const webpack = require('webpack')
const path = require('path')
// noinspection JSUnresolvedFunction
module.exports = {
    entry: [
        'babel-polyfill',
        'webpack/hot/dev-server',
        // ?reload=true enables full page reload on hmr failure
        'webpack-hot-middleware/client?reload=true',
        './app'
    ],
    context: path.resolve(__dirname, 'resources/assets/js'),
    output: {
        path: path.resolve(__dirname, 'public/js'),
        filename: 'app.js',
        publicPath: '/js/'
    },
    devtool: 'eval-source-map',
    module: {
        rules: [
            {
                enforce: 'pre',
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/
            },
            {
                enforce: 'pre',
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015'],
                    plugins: ['lodash']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        scss: 'vue-style-loader!css-loader!sass-loader?' + JSON.stringify({
                            includePaths: [
                                path.resolve(__dirname, 'node_modules/foundation-sites/scss'),
                            ]
                        }), // <style lang="scss">
                        sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
                    }
                }
            },
            {
                test: /\.scss$/,
                use: [
                    {loader: 'style-loader'},
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                            includePaths: [
                                path.resolve(__dirname, 'node_modules/foundation-sites/scss'),
                            ]
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        alias: {
            'inputmask.dependencyLib': path.resolve(__dirname, 'node_modules/jquery.inputmask/extra/dependencyLibs/inputmask.dependencyLib/'),
            'inputmask': path.resolve(__dirname, 'node_modules/jquery.inputmask/dist/inputmask/inputmask/')
        },
        extensions: ['.webpack.js', '.web.js', '.tsx', '.ts', '.js']
    },
    // watchOptions: {
    //     poll: 1000 // <-- it's worth setting a timeout to prevent high CPU load
    // },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        // new webpack.LoaderOptionsPlugin({
        //     options: {
        //         context: '/', // <- putting this line right under "options" did the trick
        //         sassLoader: {
        //             includePaths: [
        //                 path.resolve(__dirname, 'vendor/zurb/foundation/scss'),
        //                 path.resolve(__dirname, 'node_modules/motion-ui/src'),
        //                 path.resolve(__dirname, 'resources/assets/sass')
        //             ]
        //         }
        //     }
        // })
    ]
}

sass-loader-test master ✗ 5bbf397 6d △ ➜ webpack -v
2.2.1
sass-loader-test master ✗ 5bbf397 6d △ ➜ webpack 
(node:6034) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: b984fcd717d3b5867277
Version: webpack 2.2.1
Time: 2794ms
 Asset     Size  Chunks                    Chunk Names
app.js  1.62 MB       0  [emitted]  [big]  main
  [87] (webpack)/buildin/global.js 509 bytes {0} [built]
 [120] /Users/jhnns/dev/temp/sass-loader-test/~/vue/dist/vue.runtime.esm.js 174 kB {0} [built]
 [121] ./app.js 305 bytes {0} [built]
 [122] /Users/jhnns/dev/temp/sass-loader-test/~/babel-polyfill/lib/index.js 833 bytes {0} [built]
 [123] (webpack)-hot-middleware/client.js?reload=true 6.68 kB {0} [built]
 [124] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
 [127] /Users/jhnns/dev/temp/sass-loader-test/~/core-js/fn/regexp/escape.js 107 bytes {0} [built]
 [307] /Users/jhnns/dev/temp/sass-loader-test/~/core-js/shim.js 7.38 kB {0} [built]
 [314] /Users/jhnns/dev/temp/sass-loader-test/~/querystring-es3/index.js 127 bytes {0} [built]
 [316] /Users/jhnns/dev/temp/sass-loader-test/~/strip-ansi/index.js 161 bytes {0} [built]
 [318] ../sass/app.scss 1.12 kB {0} [built]
 [319] ./App.vue 1.57 kB {0} [built]
 [325] (webpack)-hot-middleware/client-overlay.js 1.82 kB {0} [built]
 [329] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
 [330] multi babel-polyfill webpack/hot/dev-server webpack-hot-middleware/client?reload=true ./app 64 bytes {0} [built]
    + 316 hidden modules
sass-loader-test master ✗ 5bbf397 6d △ ➜

asolopovas · 2017-03-02T11:34:16Z

@jhnns Thank you a lot for this library, and your support. I understand your point, I think that vue-loader with their custom pipeline could added a feature that if no additional setting provided into the pipeline, vue-loader could use default options from sass loader config, that would be definitely convenient.

asolopovas · 2017-03-02T11:35:06Z

@jhnns disregard my previous comment, I did a mistake on my end so I deleted that comment everything works as you said.

jhnns · 2017-03-02T15:12:36Z

No problem. You're welcome :)

I'm willing to help if the other side is providing a test repository. This makes spotting bugs/wrong configurations a lot easier.

a-m-dev · 2018-08-07T12:09:05Z

hey guys , i found a new way for importing slick and slick.scss it is so simple:
(1) just go inside of your node_modules folder and find slick-carousel folder
(2) inside of that find slick.scss and slick-theme.scss from slick folder and open them up
(3) create two seperate files with names of _slick.scss and _slickTheme.scss inside of your style folders of your project
(4) copy all from slick.scss and slick-theme.scss and put them in your newly created files ( _slick.scss and _slickTheme.scss )
(5) import them in your app.scssfile
(6) now if you are using webpack like me , i'm guessing that you getting can't resolve './ajax-loader.gif' error and a cant resolve font error after that
(7) in fact those files is been used by slick-carousel css it self and for that we can just simple go inside your newly created _slickTheme.scss and find these lines

/* Slider */

.slick-list {
    .slick-loading & {
        background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
    }
}

/* Icons */
@if $slick-font-family == "slick" {
    @font-face {
        font-family: "slick";
        src: slick-font-url("slick.eot");
        src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
        font-weight: normal;
        font-style: normal;
    }
}

(8) comment them out ,
(9) enjoy it ....

jhnns closed this as completed Feb 13, 2017

jhnns reopened this Feb 13, 2017

jhnns mentioned this issue Feb 13, 2017

Improve source map support #374

Merged

jhnns closed this as completed Feb 23, 2017

asolopovas mentioned this issue Apr 27, 2017

includePaths option prepends sass folder path to file locations #425

Closed

JonathanMH mentioned this issue Sep 9, 2017

add bootstrap to project? JonathanMH/webpack-scss-sass-file#6

Closed

xzyfer mentioned this issue May 23, 2018

node-sass doesn't return POSIX paths, correct? sass/node-sass#2393

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

includePaths do not work with Webpack 2 #366

includePaths do not work with Webpack 2 #366

asolopovas commented Feb 7, 2017

pamtbaau commented Feb 7, 2017

asolopovas commented Feb 7, 2017

pamtbaau commented Feb 7, 2017

asolopovas commented Feb 7, 2017

skipjack commented Feb 7, 2017 •

edited

Loading

jhnns commented Feb 7, 2017

asolopovas commented Feb 7, 2017

asolopovas commented Feb 9, 2017

coolhihi commented Feb 11, 2017

jhnns commented Feb 13, 2017 •

edited

Loading

jhnns commented Feb 13, 2017

asolopovas commented Feb 13, 2017 •

edited

Loading

skipjack commented Feb 13, 2017

jhnns commented Feb 13, 2017

asolopovas commented Feb 13, 2017

janusch commented Feb 16, 2017

jhnns commented Feb 17, 2017

skipjack commented Feb 22, 2017 •

edited

Loading

asolopovas commented Feb 23, 2017 •

edited

Loading

jhnns commented Feb 23, 2017

asolopovas commented Feb 23, 2017

jhnns commented Feb 24, 2017

jhnns commented Feb 24, 2017

asolopovas commented Feb 24, 2017

jhnns commented Feb 28, 2017

asolopovas commented Feb 28, 2017 via email

jhnns commented Feb 28, 2017

jhnns commented Mar 2, 2017

asolopovas commented Mar 2, 2017 •

edited

Loading

asolopovas commented Mar 2, 2017

jhnns commented Mar 2, 2017

a-m-dev commented Aug 7, 2018

includePaths do not work with Webpack 2 #366

includePaths do not work with Webpack 2 #366

Comments

asolopovas commented Feb 7, 2017

pamtbaau commented Feb 7, 2017

asolopovas commented Feb 7, 2017

pamtbaau commented Feb 7, 2017

asolopovas commented Feb 7, 2017

skipjack commented Feb 7, 2017 • edited Loading

jhnns commented Feb 7, 2017

asolopovas commented Feb 7, 2017

asolopovas commented Feb 9, 2017

coolhihi commented Feb 11, 2017

jhnns commented Feb 13, 2017 • edited Loading

jhnns commented Feb 13, 2017

asolopovas commented Feb 13, 2017 • edited Loading

skipjack commented Feb 13, 2017

jhnns commented Feb 13, 2017

asolopovas commented Feb 13, 2017

janusch commented Feb 16, 2017

jhnns commented Feb 17, 2017

skipjack commented Feb 22, 2017 • edited Loading

asolopovas commented Feb 23, 2017 • edited Loading

jhnns commented Feb 23, 2017

asolopovas commented Feb 23, 2017

jhnns commented Feb 24, 2017

jhnns commented Feb 24, 2017

asolopovas commented Feb 24, 2017

jhnns commented Feb 28, 2017

asolopovas commented Feb 28, 2017 via email

jhnns commented Feb 28, 2017

jhnns commented Mar 2, 2017

asolopovas commented Mar 2, 2017 • edited Loading

asolopovas commented Mar 2, 2017

jhnns commented Mar 2, 2017

a-m-dev commented Aug 7, 2018

skipjack commented Feb 7, 2017 •

edited

Loading

jhnns commented Feb 13, 2017 •

edited

Loading

asolopovas commented Feb 13, 2017 •

edited

Loading

skipjack commented Feb 22, 2017 •

edited

Loading

asolopovas commented Feb 23, 2017 •

edited

Loading

asolopovas commented Mar 2, 2017 •

edited

Loading