blueprintjs与laravel 5.2的WebPack与灵药

Question

基于来自@迈克尔 - Jungo的反馈，我已经重写这个问题在这里：laravel-elixir v6 sass-loader imports

---

我在laravel 5.2，并希望使用blueprintjs其中uses webpack tilde alias in paths，例如

@import "~bourbon/app/assets/stylesheets/bourbon"; 

因此，我明白，我需要使用的WebPack而不是仙丹browserify。 Laravel 5.2没有提供添加webpack支持的elixir版本6。我无法升级到laravel> 5.3，因为我无法在生产服务器上轻松升级我的php版本。所以我试图让elixir 6与laravel 5.2一起工作，这样我就可以使用webpack并设置这个别名，以便我可以使用蓝图。

我的错误

​​

gulpfile.js

var elixir = require('laravel-elixir'); 

    Elixir.webpack.mergeConfig({ 
     alias: {'~': path.resolve(__dirname)} 
    }); 

    elixir(function(mix) { 
     mix.sass('app.scss'); 
     mix.webpack('index.js'); 
     mix.version(['css/app.css', 'js/index.js']); 
    }); 

你可以看到，如果没有mergeConfig块，我得到的问题，在blueprintjs无法识别〜别名

{ Error: node_modules/@blueprintjs/core/src/common/_font-imports.scss 
     Error: File to import not found or unreadable: ~bourbon/app/assets/stylesheets/bourbon 

具有以下SCSS

$icon-font-path: "[email protected]/core/resources/icons"; 
    @import "node_modules/@blueprintjs/core/src/blueprint.scss"; 

供参考，这是我的package.json

{ 
    "private": true, 
    "scripts": { 
    "prod": "gulp --production", 
    "dev": "gulp watch" 
    }, 
    "devDependencies": { 
    "bootstrap-sass": "^3.3.0", 
    "gulp": "^3.9.1", 
    "laravel-elixir": "6.0.0-15", 
    "laravel-elixir-webpack-official": "^1.0.10" 
    }, 
    "dependencies": { 
    "@blueprintjs/core": "^1.10.0", 
    "axios": "^0.15.3", 
    "babel-plugin-transform-object-rest-spread": "^6.20.2", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-react": "^6.22.0", 
    "bootstrap": "^3.3.7", 
    "bourbon": "^4.3.3", 
    "form-serialize": "^0.7.1", 
    "history": "^3.0.0", 
    "immutability-helper": "^2.1.0", 
    "normalize-scss": "^6.0.0", 
    "pluralize": "^3.1.0", 
    "query-string": "^4.3.2", 
    "react": "^15.4.0", 
    "react-addons-create-fragment": "^15.4.2", 
    "react-addons-css-transition-group": "^15.4.2", 
    "react-bootstrap": "^0.30.7", 
    "react-confirm": "^0.1.14", 
    "react-dom": "^15.4.0", 
    "react-global-configuration": "^1.0.1", 
    "react-paginate": "^4.1.1", 
    "react-redux": "^4.4.6", 
    "react-router": "^3.0.0", 
    "react-router-redux": "^4.0.7", 
    "redux": "^3.6.0", 
    "redux-thunk": "^2.1.0", 
    "spinkit": "^1.2.5" 
    } 
} 

Answer 1

的波浪~不是别名，而是用来从node_modules在萨斯文件导入，如描述于sass-loader imports。但是，您错误地将其别名到当前目录（gulpfile.js所在的位置），然后该模块解析失败。所以删除该别名，它应该工作正常。

而且你还可以使你的SCSS文件，而不是指定node_modules使用该语法：

@import "[email protected]/core/src/blueprint.scss";