blueprintjs с laravel 5.2 и webpack с эликсиром

основываясь на отзывах @michael-jungo, я переписал этот вопрос здесь: laravel-elixir v6 sass -импорт загрузчика

Я использую laravel 5.2 и хочу использовать blueprintjs, который использует псевдоним webpack в виде тильды в путях, например.

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

Поэтому я понимаю, что мне нужно использовать веб-пакет, а не браузер в эликсире. Laravel 5.2 не поставляется с версией 6 elixir, в которую добавлена ​​поддержка веб-пакетов. Я не могу перейти на 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"
  }
}

webpack blueprintjs laravel-5.2 laravel-elixir
person xanld    schedule 04.03.2017    source источник
comment
Я должен сказать, что помимо компиляции sass, webpack отлично работает с js.   -  person xanld    schedule 04.03.2017
comment
Возможный дубликат импорта sass-loader elixir v6   -  person xanld    schedule 04.03.2017

Ответы (1)


arrow_upward
2
arrow_downward

Тильда ~ не является псевдонимом, но используется для импорта из node_modules в файл Sass, как описано в импорт sass-loader. Но вы неправильно указываете его на текущий каталог (где находится gulpfile.js), и тогда разрешение этого модуля не работает. Так что удалите этот псевдоним, и он должен работать нормально.

И вы также можете использовать этот синтаксис в вашем файле scss вместо указания node_modules:

@import "~@blueprintjs/core/src/blueprint.scss";
person Michael Jungo    schedule 04.03.2017
comment
Спасибо за Ваш ответ. Без псевдонима в моем gulpfile я получаю сообщение об ошибке: файл для импорта не найден или нечитаем: ~@blueprintjs/core/src/blueprint.scss. Есть ли какая-то конфигурация, которую мне нужно сделать, чтобы веб-пакет понял, где ~ отображается для импорта sass-loader? Тот факт, что я использую эликсир, усложняет ситуацию? Тот факт, что Elixir.webpack не является объектом, также кажется запахом, даже если мне не нужно добавлять конфигурацию веб-пакета в этом случае. - person xanld; 04.03.2017
comment
Нужно ли мне что-то делать с пользовательской конфигурацией загрузчика в эликсире? Я не уверен, что такое vue, и в моем package.json нет ничего, что ссылалось бы на vue или sass-loader. Что-то из этого актуально? - person xanld; 04.03.2017
comment
Честно говоря, я понятия не имею, что делает elixir.sass, но не похоже, что он использует веб-пакет, поэтому этот синтаксис не работает. Так что, возможно, вы могли бы использовать уже обработанный css вместо версии Sass (в dist/ вместо src/): @import "node_modules/@blueprintjs/core/dist/blueprint.css"; - person Michael Jungo; 04.03.2017
comment
Хорошо, это работает, но, конечно, это означает, что я не могу установить какие-либо переменные до компиляции blueprint sass. Таким образом, проблема здесь, похоже, конкретно в том, как использовать импорт sass-loader с elixir 6. - person xanld; 04.03.2017
comment
Если вы хотите использовать .scss, я бы порекомендовал сделать это напрямую с веб-пакетом, поэтому не используйте elixir.sass, который, по-видимому, просто обрабатывает Sass. Вместо этого вы должны импортировать его в точку входа JavaScript, как описано в разделе Разделение кода — CSS< /а>. Для этого необходимо настроить sass-loader. - person Michael Jungo; 04.03.2017