blueprintjs與laravel 5.2的WebPack與靈藥

基於來自@邁克爾 - Jungo的反饋，我已經重寫這個問題在這裏：laravel-elixir v6 sass-loader imports blueprintjs與laravel 5.2的WebPack與靈藥

我在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" 
    } 
}

來源

2017-03-04 xanld

我應該說比SASS編譯其他的WebPack工作正常與JS。 – xanld

[elixir v6 sass-loader imports]可能重複（http://stackoverflow.com/questions/42594792/elixir-v6-sass-loader-imports） – xanld

的波浪~不是別名，而是用來從node_modules在薩斯文件導入，如描述於sass-loader imports。但是，您錯誤地將其別名到當前目錄（gulpfile.js所在的位置），然後該模塊解析失敗。所以刪除該別名，它應該工作正常。

而且你還可以使你的SCSS文件，而不是指定node_modules使用該語法：

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

來源

2017-03-04 08:59:08

感謝您的回答。如果沒有我的大文件中的別名，我會得到「錯誤：文件導入未找到或無法讀取：[email protected]/core/src/blueprint.scss」。是否有某種配置需要我爲webpack理解〜映射到sass-loader導入的位置？我正在使用長生不老藥會使事情變得複雜嗎？ Elixir.webpack不是一個對象的事實似乎也是一種嗅覺，即使我不需要在這個實例中添加webpack配置。 – xanld

我需要在elixir中使用自定義加載程序配置做些什麼嗎？我不確定vue是什麼，並且我沒有在package.json中引用vue或sass-loader。這有什麼關係？ – xanld

我真的不知道'elixir.sass'的作用，但它看起來並不像使用webpack，因此這種語法不起作用。所以，也許你可以使用已經處理的css代替Sass版本（在'dist /'而不是'src /'中）：'@import「node_modules/@blueprintjs/core/dist/blueprint.css」;' –

blueprintjs與laravel 5.2的WebPack與靈藥

回答

相關問題