WebPack 2でSCSS @importsパスを簡略化する

Question

WebPackプラグインを使用するプロジェクトのセットアップは現在sass-loaderです。

@import "~bootstrap/scss/mixins/breakpoints"; 

は、私は私自身のSCSSビット単純なファイルのインポートを行うために、上記のようなショートカットを作成することができます方法はあります：これは、我々は簡単に以下のものを使用して、node_modulesからSCSSをインポートすることができます。私は、例えば変換できるようにしたいと思います：

@import '../../../../styles/app'; 

@import '~styles/app'; 

あるいは

@import 'styles/app'; 

に私は現在、私のwebpack.config.jsで以下のリゾルバの設定を持っています：

// .... 
resolve: { 
    alias: { 
     selectize$: path.join(__dirname, './node_modules/selectize/dist/js/selectize') 
    }, 
    extensions: ['.ts', '.js'], 
    modules: ['./node_modules'] 
}, 
resolveLoader: { 
    modules: ['./node_modules'] 
} 
//.... 

Answer 1

これを取得するにはNG、Iはsrc/styles/app

{ 
    exclude: [ /* excludes */ ], 
    test: /\.scss$/, 
    loaders: [ 
     'exports-loader?module.exports.toString()', 
     'css-loader', 
     'postcss-loader', 
     { 
      loader: 'sass-loader', 
      options: { 
       importer: (url, prev, done) => { 
        if (url[0] === '~') { 
         url = path.resolve('node_modules', url.substr(1)); 
        } else if (url.startsWith('styles/')) { 
         url = path.resolve('src/', url); 
        } 

        return {file: url} 
       } 
      } 
     } 
    ] 
} 

からこのように、例えばstyles/appためのローディングを可能にするためにSASSローダを介してノードSASS 輸入にオプションを変更し、WebPACKのは幸せであり、且つとしてWebStormでSRCパスを追加した後リソースルート、autocompletionはまだ動作し、WebStormはファイルを見つけることができないと不平を言っていません。

This StackOverflow questionは、私の問題を解決するのに非常に役立ちました。