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＆gt; 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";

带有laravel 5.2的blueprintjs和带有elixir

1 个答案: