css - ওয়েবপ্যাক অ্যাঙ্গুলার 2 অ্যাপে নোড_মডিউলগুলি থেকে সিএসএস কীভাবে আমদানি করা যায়



angular typescript (2)

আপনি কিছু পরিবর্তন না করে that স্ট্যাকটি ব্যবহার করে আপনার বিক্রেতাদের ফাইলে কোনও সিএসএস আমদানি করতে পারবেন না।

কেন? ভাল কারণ এই লাইন:

import 'bootstrap/dist/css/bootstrap.css';

এটি কেবলমাত্র আপনার সিএসএসকে স্ট্রিং হিসাবে আমদানি করে, যখন বাস্তবে আপনি যা চান তা কোনও স্টাইল ট্যাগে আপনার বিক্রেতা সিএসএস হয়। আপনি যদি config/webpack.commons.js পরীক্ষা করেন তবে আপনি এই বিধিটি পাবেন:

 {
   test: /\.css$/,
   loaders: ['to-string-loader', 'css-loader']
 },

এই নিয়মটি আপনার উপাদানগুলিকে মূলত সিএসএস ফাইলগুলি আমদানি করার অনুমতি দেয়:

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.component.css' // this why you import css as string
  ],

অ্যাপকোম্পোনেন্টে এই ল্যাপস এনক্যাপসুলেশনটির কারণে কোনও এনক্যাপসুলেশন নেই encapsulation: ViewEncapsulation.None, যার অর্থ কোনও অ্যাপ্লিকেশনটিতে বিশ্বব্যাপী কোনও সিএসএস বিধি প্রয়োগ করা হবে। সুতরাং আপনি নিজের অ্যাপ্লিকেশন উপাদানটিতে বুটস্ট্র্যাপ শৈলীগুলি আমদানি করতে পারেন:

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.component.css',
    '../../node_modules/bootstrap/dist/css/bootstrap.css'
  ],

তবে আপনি যদি আপনার vendor.ts আমদানি করার জন্য জোর দিয়ে থাকেন তবে আপনাকে নতুন একটি লোডার ইনস্টল করতে হবে, npm i style-loader --save-dev এটি ওয়েবপ্যাকটি আপনার পৃষ্ঠায় সিএসএস ইনজেক্ট করার অনুমতি দেবে। তারপরে আপনার ওয়েবপ্যাক ডটকম.জেজে আপনাকে একটি নির্দিষ্ট নিয়ম তৈরি করতে হবে এবং বিদ্যমানটি পরিবর্তন করতে হবে:

 { //this rule will only be used for any vendors
   test: /\.css$/,
   loaders: ['style-loader', 'css-loader'],
   include: [/node_modules/]
 },
 {
   test: /\.css$/,
   loaders: ['to-string-loader', 'css-loader'],
   exclude: [/node_modules/] //add this line so we ignore css coming from node_modules
 },

আপনি যখন সিএসএস আমদানির চেষ্টা করবেন তখনই কেবলমাত্র বিধি প্রয়োগ করা হবে, node_modules যে কোনও প্যাকেজ থেকে দ্বিতীয় নিয়মটি node_modules বাইরে থেকে আমদানি করা কোনও node_modules জন্য প্রয়োগ করা হবে

ধরা যাক আমরা নীচের স্টার্টার প্যাকটি দিয়ে শুরু করি: https://github.com/angularclass/angular2-webpack-starter

npm install এবং npm run start সবকিছু ঠিকঠাক কাজ করে।

আমি একটি বহিরাগত CSS মডিউল যুক্ত করতে চাই, উদাহরণস্বরূপ বুটস্ট্র্যাপ 4 এর সিএসএস (এবং কেবল সিএসএস)। (আমি জানি যে বুটস্ট্র্যাপের একটি বুটস্ট্র্যাপ-লোডার রয়েছে, তবে এখন আমি সাধারণ সমাধানের জন্য জিজ্ঞাসা করছি, সুতরাং দয়া করে এখানে বুটস্ট্র্যাপ 4 সম্পর্কে চিন্তা করুন কারণ এটি এনপিএমের মাধ্যমে উপলব্ধ যে কোনও সিএসএস মডিউল হতে পারে)।

আমি এনপিএম এর মাধ্যমে বুটস্ট্র্যাপ ইনস্টল করি: npm install [email protected] --save

প্রথমে আমি ভেবেছিলাম যে import 'bootstrap/dist/css/bootstrap.css'; করার জন্য এটি যথেষ্ট import 'bootstrap/dist/css/bootstrap.css'; vendor.browser.ts ফাইলটিতে।

তবে তা হয় না।

সঠিক সমাধান পেতে আমার কী করা উচিত?

সমাধানগুলির জন্য আমি জিজ্ঞাসা করছি না:

  1. "সম্পত্তির ফোল্ডারে বাহ্যিক CSS মডিউলটি অনুলিপি করুন এবং সেখান থেকে এটি ব্যবহার করুন"
    • আমি এমন একটি সমাধান খুঁজছি যা এনপিএম প্যাকেজের সাথে একসাথে কাজ করে।
  2. "ওয়েবপ্যাকের জন্য বুটস্ট্র্যাপ-লোডার ব্যবহার করুন"
    • আমি উপরে বর্ণিত হিসাবে, আমি একটি সাধারণ সমাধান খুঁজছি, বুটস্ট্র্যাপ এখানে শুধুমাত্র একটি উদাহরণ।
  3. "অন্য স্ট্যাক ব্যবহার করুন"
    • আমি উপরে উল্লিখিত সঠিক স্টার্টার প্যাকের একটি সমাধান খুঁজছি।

Answer #1

সুতরাং angular-cli ব্যবহার করে বিভিন্ন CSS ফাইল আমদানির একটি উপায় যা আমি সবচেয়ে সুবিধাজনক বলে মনে করি।

মূলত, আপনি CSS ফাইলগুলি উল্লেখ করতে পারেন (আপনি যদি সেগুলি ওভাররাইড করে থাকেন তবে ক্রমটি গুরুত্বপূর্ণ) উদাহরণস্বরূপ, আপনি নোড-মডিউলগুলি থেকে কয়েকটি স্টাইল অন্তর্ভুক্ত করতে চাইতে পারেন যা নিম্নলিখিত হিসাবে করা যেতে পারে:

"styles": [
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "../node_modules/primeng/resources/primeng.min.css",
    "styles.css"
  ]

একটি নমুনা পূর্ণ-কনফিগারেশনটি দেখতে এরকম হতে পারে:

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-angular-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}




webpack