用WebPack 2簡化SCSS @import路徑

Question

我目前有一個使用sass-loader WebPack插件的項目設置。這意味着，我們可以很容易地使用以下node_modules導入SCSS：

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

有沒有一種方法我可以創建類似上面的快捷方式，使自己的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

爲了讓它工作納克，我通過SASS裝載機改變了節點SASS 進口商選項，以允許裝載例如styles/app從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} 
       } 
      } 
     } 
    ] 
} 

這樣，的WebPack是快樂的，並且在WebStorm添加SRC路徑作爲後資源根目錄，自動完成仍然有效，WebStorm並不抱怨它無法找到該文件。

This StackOverflow question對解決我的問題非常有用。