title: How to correct @import scss file inside other scss using Webpack
body: <p>I using Webpack to compile my SCSS files, based on simplest way:</p>
  
  <pre><code>module.exports = {
    entry: './src/home.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            'style-loader', 
            'css-loader',
            'sass-loader',
          ]
        }
      ]
    }
  };
  </code></pre>
  
  <p>Full content of <code>src/home.js</code> file:</p>
  
  <pre><code>import 'library_name/src/assets/scss/styles.scss';
  </code></pre>
  
  <p>Fragment of <code>styles.scss</code> has code like below:</p>
  
  <pre><code>@import '../../../node_modules/bootstrap/scss/bootstrap.scss';
  </code></pre>
  
  <p>So, when I run <code>webpack</code> command then I get error message:</p>
  
  <p><em>SassError: File to import not found or unreadable: ../../../node_modules/bootstrap/scss/bootstrap.scss.<br>
  on line 5 of ...\node_modules\library_name\src\assets\scss\styles.scss</em></p>