带有 laravel 5.2 的 blueprintjs 和带有 elixir 的 webpack

Question

根据@michael-jungo 的反馈，我在这里重写了这个问题：laravel-elixir v6 sass-loader imports

---

我在 laravel 5.2 上并想使用 blueprintjs 哪个 uses webpack tilde alias in paths，例如

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

因此我明白我需要在 elixir 中使用 webpack 而不是 browserify。 Laravel 5.2 不附带 elixir 版本 6，这是添加 webpack 支持的地方。我无法升级到 laravel > 5.3，因为我无法在生产服务器上轻松升级我的 php 版本。所以我试图让 elixir 6 与 laravel 5.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

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

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

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