webpack 中给 sassLoader 单独配置的方法

起因是 vuecli 生成的 Vue2.0 单页面组件项目中,import 无法直接引入 npm 插件,如下代码会抛出找不到文件的异常:

@import 'bulma';

显然是缺少includePaths,解决方法如下:

找到webpack.base.conf.js,在根模块添加sassLoader的设置

sassLoader: {
  includePaths: ['./node_modules']
}

新版本问题更新:

  1. 注意:sass-loader 5.0 版本目前有问题,includePaths 参数无效,暂时解决方法是降至4.1.1

     npm i -D sass-loader@4.1.1
    
  2. webpack 2.0 以上版本,loader的加载方式将放在rules中,无法单独配置sassLoader,需要使用LoaderOptionsPlugin插件,方法如下:

    修改webpack.base.conf.jsmodule.exports中加上以下代码:

     plugins: [
       new webpack.LoaderOptionsPlugin({
         options: {
           sassLoader: {
             includePaths: [
               resolve('node_modules')
             ]
           }
         }
       })
     ]
    

跟进问题请留意:https://github.com/jtangelder/sass-loader/issues/366

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏