title: How can I get valid css from sass-loader with current webpack configuration?
body: <p>I am about to create a pattern library for my company. I am using the following software:</p>
  <ul>
  <li>css-loader@0.23.1</li>
  <li>extract-text-webpack-plugin@1.0.1</li>
  <li>node-sass@3.8.0</li>
  <li>sass-loader@4.0.0</li>
  <li>style-loader@0.13.1</li>
  <li>webpack@1.13.2</li>
  <li>resolve-url-loader@1.6.0</li>
  <li>node@6.3.1</li>
  <li>npm@3.10.3</li>
  </ul>
  <p>on my computer (Windows 10).</p>
  <p>My goal is to use the <code>@import &quot;colors&quot;</code> statement and to get corresponding file <code>../patterns/globals/_colors.css</code>. I tried the <code>includePaths</code> configuration of the sass-loader and the resolve-url-loader with the property <code>root</code>. But neither is working so far...</p>
  <p>In my first run with sass-loader and includePaths I got the following error report:</p>
  <pre><code>Hash: 396f0bfb9d565b6f60f0
  Version: webpack 1.13.2
  Time: 522ms
      + 1 hidden modules
  
  ERROR in ./styles.scss
  Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ./colors in ~/projects/webpack-sass-fail/app
      at ~/projects/webpack-sass-fail/app/node_modules/webpack/lib/Compilation.js:229:38
      at onDoneResolving (~/projects/webpack-sass-fail/app/node_modules/webpack/lib/NormalModuleFactory.js:29:20)
      at ~/projects/webpack-sass-fail/app/node_modules/webpack/lib/NormalModuleFactory.js:85:20
      at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:726:13
      at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:52:16
      at done (~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:241:17)
      at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:44:16
      at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:723:17
      at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:167:37
      at ~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:24:19
      at onResolved (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/Resolver.js:38:18)
      at ~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/Resolver.js:127:10
      at ~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/Resolver.js:191:15
      at applyPluginsParallelBailResult.createInnerCallback.log (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/Resolver.js:110:4)
      at loggingCallbackWrapper (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/createInnerCallback.js:21:19)
      at ~/projects/webpack-sass-fail/app/node_modules/tapable/lib/Tapable.js:134:6
      at Tapable.&lt;anonymous&gt; (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/DirectoryDescriptionFilePlugin.js:24:12)
      at Storage.finished (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
      at ReadFileContext.callback (~/projects/webpack-sass-fail/app/node_modules/graceful-fs/graceful-fs.js:78:16)
      at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13)
  Child extract-text-webpack-plugin:
          + 2 hidden modules
  
      ERROR in ./~/css-loader!./styles.scss
      Module not found: Error: Cannot resolve 'file' or 'directory' ./colors in ~\projects\webpack-sass-fail\app
       @ ./~/css-loader!./styles.scss 3:10-66
  
      ERROR in ./~/css-loader!./styles.scss
      Module not found: Error: Cannot resolve 'file' or 'directory' ./typography in ~\projects\webpack-sass-fail\app
       @ ./~/css-loader!./styles.scss 4:10-70
  </code></pre>
  <p>After my second run with resolve-url-loader I got another error report:</p>
  <pre><code>Hash: 0f2ad6d2bedd426d776a
  Version: webpack 1.13.2
  Time: 605ms
      Asset     Size  Chunks             Chunk Names
  bundle.js  1.42 kB       0  [emitted]  app
     [0] ./client.js 27 bytes {0} [built]
      + 1 hidden modules
  
  ERROR in ./styles.scss
  Module build failed: ModuleBuildError: Module build failed: CssSyntaxError: css-loader!~/projects/webpack-sass-fail/patterns/globals/colors.scss:14:9: Unknown word
  You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
      at Input.error (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/input.js:120:22)
      at Parser.unknownWord (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:457:26)
      at Parser.word (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:174:14)
      at Parser.loop (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:60:26)
      at parse (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parse.js:26:16)
      at new LazyResult (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/lazy-result.js:80:24)
      at Processor.process (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/processor.js:200:12)
      at processCss (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/processCss.js:188:11)
      at Object.module.exports (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/loader.js:24:2)
      at DependenciesBlock.onModuleBuildFailed (~/projects/webpack-sass-fail/app/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
      at nextLoader (~/projects/webpack-sass-fail/app/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
      at ~/projects/webpack-sass-fail/app/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
      at context.callback (~/projects/webpack-sass-fail/app/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
      at Object.&lt;anonymous&gt; (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/loader.js:32:18)
      at ~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/processCss.js:211:3
      at runMicrotasksCallback (internal/process/next_tick.js:58:5)
      at _combinedTickCallback (internal/process/next_tick.js:67:7)
      at process._tickCallback (internal/process/next_tick.js:98:9)
  Child extract-text-webpack-plugin:
          + 4 hidden modules
  
      ERROR in ./~/css-loader!../patterns/globals/colors.scss
      Module build failed: CssSyntaxError: css-loader!~/projects/webpack-sass-fail/patterns/globals/colors.scss:14:9: Unknown word
      You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
          at Input.error (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/input.js:120:22)
          at Parser.unknownWord (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:457:26)
          at Parser.word (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:174:14)
          at Parser.loop (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:60:26)
          at parse (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parse.js:26:16)
          at new LazyResult (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/lazy-result.js:80:24)
          at Processor.process (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/processor.js:200:12)
          at processCss (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/processCss.js:188:11)
          at Object.module.exports (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/loader.js:24:2)
       @ ./~/css-loader!./styles.scss 3:10-89
  
      ERROR in ./~/css-loader!../patterns/globals/typography.scss
      Module not found: Error: Cannot resolve 'file' or 'directory' ./colors in ~/projects/webpack-sass-fail/patterns/globals
       @ ./~/css-loader!../patterns/globals/typography.scss 3:10-76
  </code></pre>
  <p>I I try to compile a simle sass with the following content:</p>
  <pre><code>$grey: lightgrey;
  $family: &quot;Tahoma&quot;;
  
  body {
    font-size: 12px;
  }
  
  p {
    border: 1px solid $grey;
    font-family: $family;
  }
  </code></pre>
  <p>with the mentioned webpack configuration I receive no error message but invalid CSS code like this one:</p>
  <pre><code>$family: &quot;Tahoma&quot;;
  $grey: lightgrey;
  
  body {
    font-size: 12px;
  }
  
  p {
    border: 1px solid $grey;
    font-family: $family;
  }
  </code></pre>
  <p>I don't understand where is the source for my fail.</p>
  <p>Best regards,
  JBrieske</p>
  <p>Edit: With the help from @IRus I managed to solve my problem.</p>