用WebPack 2简化SCSS @import路径

问题描述：

我目前有一个使用sass-loader WebPack插件的项目设置。这意味着，我们可以很容易地使用以下node_modules导入SCSS：用WebPack 2简化SCSS @import路径

@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'] 
} 
//....

尝试向resolve.alias添加样式：path.resolve（__ dirname，'./src/styles'），但它不会更改任何内容。 –

答

为了让它工作纳克，我通过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 * question对解决我的问题非常有用。

用WebPack 2简化SCSS @import路径

相关推荐