蓝皮书配拉拉5.2，webpack配长生药

Question

基于@michael-jungo的反馈，我在这里重写了这个问题：拉拉维尔-灵丹妙药v6 sass-装载机进口

我用的是Laravel5.2，我想用的是蓝皮书，在路径中使用webpack倾斜别名。

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

因此，我明白，我需要使用webpack，而不是褐变在灵丹妙药。Laravel5.2没有提供灵丹妙药版本6，这是webpack支持的地方。我不能升级到laravel > 5.3，因为我不能轻松地在生产服务器上升级我的php版本。所以我试着让长生不老6和Laravel5.2一起工作，这样我就可以使用webpack并设置这个别名，这样我就可以使用蓝图了。

我的错误

    gulp watch
    /path/to/project/gulpfile.js:3
    Elixir.webpack.mergeConfig({
    ^

    TypeError: Cannot read property 'mergeConfig' of undefined
    at Object.<anonymous> (/Users/si/cesg/projects/mason-presentation-admin/gulpfile.js:3:23)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at execute (/usr/local/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/index.js:24:18)
    at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp-cli/index.js:149:63)

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: "~@blueprintjs/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

tilde ~不是别名，而是用于从Sass文件中的node_modules导入，如sass-装载机进口中所述。但是您错误地将其别名到当前目录( gulpfile.js所在的目录)，然后这个模块解析失败。所以去掉那个化名，它就会正常工作。

您还可以在scss文件中使用该语法，而不是指定node_modules。

@import "~@blueprintjs/core/src/blueprint.scss";