मैं एक ही प्रोजेक्ट में Laravel और Materialize css दोनों का उपयोग करना चाहता हूं। एसएएस फाइलों के माध्यम से ऐसा करने का सबसे अच्छा तरीका क्या है? मैं लार्वेल के वेबपैक सिस्टम में निर्मित का उपयोग करना चाहता हूं। वेबसाइट कहती है कि यदि आप SASS का उपयोग करना चाहते हैं, तो यहां स्रोत है, आपको एक स्कैस कंपाइलर की आवश्यकता होगी। धन्यवाद, बहुत उपयोगी है। नहीं।सास के माध्यम से लैरावेल और मटेरियलाइज-सीएसएस को एकीकृत करने का सही तरीका क्या है?
इस बहुत ही वर्बोज़ उदाहरण के लिए, मैं एक ताजा लार्वा इंस्टॉल के साथ शुरू करूंगा।
डिफ़ॉल्ट webpack.mix.js:
const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
यह डिफ़ॉल्ट विन्यास काम करता है:
$ npm run dev
DONE Compiled successfully in 4287ms 11:19:15 PM
Asset Size Chunks Chunk Names
fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1 20.1 kB [emitted]
fonts/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760 109 kB [emitted]
fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512 45.4 kB [emitted]
fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158 23.4 kB [emitted]
fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb 18 kB [emitted]
/js/app.js 1.16 MB 0 [emitted] [big] /js/app
/css/app.css 686 kB 0 [emitted] [big] /js/app
mix-manifest.json 66 bytes [emitted]
लेकिन मैं का उपयोग करना चाहते अमल में लाना:
$ npm install materialize-css --save-dev
/home/vagrant/Code/laravel
└─┬ [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
अब एक फ़ोल्डर node_modules/materialize-css है साथ इसमें स्रोत मैं सास का उपयोग करना चाहता हूं इसलिए अगर मुझे कुछ बदलना है तो मुझे ढांचे पर अधिक नियंत्रण होगा। मैं सिर्फ node_modules/materialize-css/sass से सीधे वेबपैक के साथ निर्माण कर सकता हूं, लेकिन फिर भौतिक बनाने के लिए कोई भी अपडेट मेरे परिवर्तनों को ओवरराइट करेगा। तो मुझे node_modules/sass से resources/assets/sass से एसएएस फ़ाइलों की प्रतिलिपि बनाने की आवश्यकता है।
मैं node_modules/materialize-css/sass/ निर्देशिका से ऐसा करते हैं:
$ cp -R . ../../../resources/assets/sass/
कौन सा काम करता है:
[email protected]:~/Code/laravel/resources/assets/sass$ ls
app.scss components ghpages-materialize.scss materialize.scss _style.scss _variables.scss
app.scss और _variables.scss डिफ़ॉल्ट bootstrap सेटअप से बचे हुए हैं। materialize.scss ढांचे की मुख्य सैस फ़ाइल है, और यह components निर्देशिका से घटक लोड करता है। ghpages-materialize.scss सिर्फ उदाहरण साइट के लिए एससीएसएस फ़ाइल है, तो मुझे यकीन है कि क्यों इसे यहाँ शामिल किया गया है नहीं कर रहा हूँ:
@charset "UTF-8";
// import materialize
@import "materialize";
// Custom style
@import "style";
तो यह अंतिम फ़ाइल, _style.scss का उपयोग करने की अमल में लाना अनुकूलित करने के लिए प्रकट होता है। इसके अलावा, आयात में अंडरस्कोर का उल्लेख नहीं किया गया है। जाहिर है अंडरस्कोर अनदेखा कर रहे हैं। मैंने सोचा था कि उन हिस्सों के वर्णमाला के लिए था जिन्हें आप बदलने जा रहे हैं, लेकिन स्पष्ट रूप से it just means its a css partial। तथ्य यह है कि भौतिकता एक सीएसएस आंशिक नहीं है, इसे उसी तरह शामिल करने से नहीं रोकती है। वैसे भी, मैं फ़ाइलों को हटा देंगे मैं की जरूरत नहीं है:
$ rm ghpages-materialize.scss _variables.scss
_variables.scss बूटस्ट्रैप के लिए है, और अमल में लाना components में अपनी ही है, यदि आवश्यक हो।
वर्ष app.scss इस के साथ बदलें:
// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Materialize
@import "materialize";
और webpack फिर से चलाने की कोशिश:
$ npm run dev
ERROR Failed to compile with 20 errors 12:14:06 AM
These dependencies were not found in node_modules:
* ../fonts/roboto/Roboto-Thin.eot
* ../fonts/roboto/Roboto-Thin.woff2
* ../fonts/roboto/Roboto-Thin.woff
* ../fonts/roboto/Roboto-Thin.ttf
* ../fonts/roboto/Roboto-Light.eot
* ../fonts/roboto/Roboto-Light.woff2
* ../fonts/roboto/Roboto-Light.woff
* ../fonts/roboto/Roboto-Light.ttf
* ../fonts/roboto/Roboto-Regular.eot
* ../fonts/roboto/Roboto-Regular.woff2
* ../fonts/roboto/Roboto-Regular.woff
* ../fonts/roboto/Roboto-Regular.ttf
* ../fonts/roboto/Roboto-Medium.eot
* ../fonts/roboto/Roboto-Medium.woff2
* ../fonts/roboto/Roboto-Medium.woff
* ../fonts/roboto/Roboto-Medium.ttf
* ../fonts/roboto/Roboto-Bold.eot
* ../fonts/roboto/Roboto-Bold.woff2
* ../fonts/roboto/Roboto-Bold.woff
* ../fonts/roboto/Roboto-Bold.ttf
Did you forget to run npm install --save for them?
Asset Size Chunks Chunk Names
/js/app.js 1.16 MB 0 [emitted] [big] /js/app
mix-manifest.json 32 bytes [emitted]
npm ERR! Linux 4.4.0-51-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=$npm_package_config_webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script 'node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=$npm_package_config_webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=$npm_package_config_webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/vagrant/Code/laravel/resources/assets/sass/npm-debug.log
$
नहीं है एक ELIFECYCLE त्रुटि, whatever that means, और कुछ लापता फ़ॉन्ट फ़ाइलों। वेबपैक को फ़ॉन्ट फ़ाइलों की आवश्यकता क्यों है? मैंने उन्हें इसके बारे में नहीं बताया। शायद उन्हें सीएसएस में कहीं भी उल्लेख किया गया है, हालांकि एक त्वरित खोज इसे नहीं मिल सका।वैसे भी, ऐसा लगता है कि फोंट को फ़ॉन्ट फ़ोल्डर में सिर्फ node_modules से ऊपर देख रहा है।
$ cp -R node_modules/materialize-css/fonts/ ./fonts/
यह फ़ॉन्ट्स निर्देशिका को मेरी लार्वा निर्देशिका में कॉपी करता है।
फिर, मैं webpack पुन: प्रयास करें:
$ npm run dev DONE Compiled successfully in 3772ms 12:24:24 AM
Asset Size Chunks Chunk Names
fonts/Roboto-Medium.ttf?894a2ede85a483bf9bedefd4db45cdb9 127 kB [emitted]
fonts/Roboto-Bold.eot?ecdd509cadbf1ea78b8d2e31ec52328c 21 kB [emitted]
fonts/Roboto-Medium.eot?4d9f3f9e5195e7b074bb63ba4ce42208 21.4 kB [emitted]
fonts/Roboto-Regular.eot?30799efa5bf74129468ad4e257551dc3 21.3 kB [emitted]
fonts/Roboto-Thin.eot?dfe56a876d0282555d1e2458e278060f 21.7 kB [emitted]
fonts/Roboto-Bold.ttf?e31fcf1885e371e19f5786c2bdfeae1b 128 kB [emitted]
fonts/Roboto-Bold.woff?dc81817def276b4f21395f7ea5e88dcd 62.9 kB [emitted]
fonts/Roboto-Bold.woff2?39b2c3031be6b4ea96e2e3e95d307814 50 kB [emitted]
fonts/Roboto-Light.ttf?46e48ce0628835f68a7369d0254e4283 127 kB [emitted]
fonts/Roboto-Light.woff?3b813c2ae0d04909a33a18d792912ee7 62.3 kB [emitted]
fonts/Roboto-Light.woff2?69f8a0617ac472f78e45841323a3df9e 49.4 kB [emitted]
fonts/Roboto-Light.eot?a990f611f2305dc12965f186c2ef2690 20.9 kB [emitted]
fonts/Roboto-Medium.woff?fc78759e93a6cac50458610e3d9d63a0 63 kB [emitted]
fonts/Roboto-Medium.woff2?574fd0b50367f886d359e8264938fc37 50.2 kB [emitted]
fonts/Roboto-Regular.ttf?df7b648ce5356ea1ebce435b3459fd60 126 kB [emitted]
fonts/Roboto-Regular.woff?ba3dcd8903e3d0af5de7792777f8ae0d 61.7 kB [emitted]
fonts/Roboto-Regular.woff2?2751ee43015f9884c3642f103b7f70c9 49.2 kB [emitted]
fonts/Roboto-Thin.ttf?94998475f6aea65f558494802416c1cf 128 kB [emitted]
fonts/Roboto-Thin.woff?7500519de3d82e33d1587f8042e2afcb 61.6 kB [emitted]
fonts/Roboto-Thin.woff2?954bbdeb86483e4ffea00c4591530ece 48.5 kB [emitted]
/js/app.js 1.16 MB 0 [emitted] [big] /js/app
/css/app.css 570 kB 0 [emitted] [big] /js/app
mix-manifest.json 66 bytes [emitted]
मुझे लगता है कि इसका मतलब है कि यह काम किया? मिश्रण-manifest.json फ़ाइल के लिए क्या है?
तो अब मेरे पास एक app.css है जिसमें मुझे जो कुछ चाहिए वह होना चाहिए। अगर मुझे अपनी खुद की कस्टम शैलियों को जोड़ने की ज़रूरत है, तो मैं में _style.scss लिख और शामिल कर सकता हूं। क्या यह काम करने वाला तरीका है?
मैं नहीं चाहता कि फोंट निर्देशिका मेरी प्रोजेक्ट निर्देशिका को छेड़छाड़ करे, हालांकि, और मैं कभी भी फ़ॉन्ट फ़ाइलों को बदलने वाला नहीं हूं। क्या वे सार्वजनिक होना चाहते हैं, या अब वे सीएसएस फ़ाइल में शामिल हैं? मैं फोंट को इसके बजाय node_modules में भौतिक बनाने से कैसे लोड कर सकता हूं?
आखिरकार, इस प्रक्रिया के बारे में कुछ भी है जो मैंने इसे प्रस्तुत किया है, जो उससे आसान और कम गन्दा होना चाहिए?
लेकिन प्रतीक्षा करें - मैं जेएस भूल गया!
the javascript का उपयोग कैसे किया जाना चाहिए? बस एक जेएस फ़ोल्डर में डंप किया गया, या एक फ़ाइल में संकलित और minified, या कई फाइलों में? मुझे ऐसा करने का एक आसान तरीका नहीं दिख रहा है, या तो।