theme css not found

[KSANTHOSHKUMA]

How to include quill + theme css in our Application buildproess, module or index.html

[KillerCodeMonkey]

depends how you build process is working you could simply add the min.css to your index.html

Or you import the .css in your .css file so it is build automatically in you build results.

if you are using angular cli and importing css/ts of node_module extra vendor js and css files are generated automatically.

But for easy use --> simply import the .css files in your css file :)

[KSANTHOSHKUMA]

Thanks i am using angular/cli , after npm install ... i got ngx-quill and some other folders in node_modules of my Application but i can not find the min.css how to include it in .angular/cli.json or index.html provide a example line of text like below "../node_modules/bootstrap/dist/css/bootstrap.min.css",

Thanks

[KillerCodeMonkey]

ngx-quill is only a wrapper an has peerDependencies to quilljs, so you will have also a quilljs-folder in your node_modules ;)

in your css

@import '~quill/path_to_css';
@import "~bootstrap/.../bootstrap.min.css";

i think you do not need to add the absolute node_modules path And you can import quill in your TS-Files like

import * as Quill from 'quill';

console.log(Quill);

[KSANTHOSHKUMA]

Hi It is fine but where to add @import statements. i write console.log(Quill) and it printing some function on browser console after writing the following selector

text editor is showing but styles are missing how to resolve this. Sorry for asking like this as i am new to angular

Thanks in Advance

[KillerCodeMonkey]

i think you have an app.css or .scss file in your project?

add the import there

[KSANTHOSHKUMA]

No .scss files are there in my application and i am unable to add import statements.

in our application we have .angular/cli.json file to include external stylesheets like below

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "cli-test4"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "data"
      ],
      "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/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/devextreme/dist/css/dx.common.css",
        "../node_modules/devextreme/dist/css/dx.light.css",
        "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
        "../src/assets/public/css/newcss-new/webicons/web-icons.min.css",
         .............................................

so provide me the path to add to node_modules or any alternative which will solve my issue

[KillerCodeMonkey]

i think you can find the path on your own... simple checkout quilljs documentation or your node_modules/quill folder... -.-

BTW: i am not here for giving quilljs or angular-cli support ;)

[Akitha]

Just add to styles.css

@import '~quill/dist/quill.core.css'; @import '~quill/dist/quill.bubble.css'; @import '~quill/dist/quill.snow.css';

[mssaxian]

Adding @import '~quill/dist/quill.snow.css'; to my component css file works. Except not really. The editor display is broken as though it is getting no CSS. However, the quill.snow.css is getting imported. I know this because if I edit quill.snow.css by adding this to the bottom of the file,

* {
  background:red;
}

the red does display. But none of the other styles in the file do.

I assume this is due to css classes getting prefixed for view encapsulation by angular.

How can I resolve this?

[KillerCodeMonkey]

If your components is viewencapsulated The CSS selectors are Not matching and The Styling is not applied to quill Editor.

So Just import quil CSS aus global CSS or set View encapsulation to none vor your component.

mssaxian notifications@github.com schrieb am Mo., 23. März 2020, 17:57:

Adding @import '~quill/dist/quill.snow.css'; to my component css file works. Except not really. The editor display is broken as though it is getting no CSS. However, the quill.snow.css is getting imported. I know this because if I edit quill.snow.css by adding this to the bottom of the file,

• { background:red; }

the red does display. But none of the other styles in the file do.

I assume this is due to css classes getting prefixed for view encapsulation by angular.

How can I resolve this?

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/110#issuecomment-602727293, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARI4YFZFQDB22OILHRRM43RI6IHHANCNFSM4EQOABZA .

[mssaxian]

Thanks for the quick reply, @KillerCodeMonkey

Any way to get it working if both view and file encapsulation is desired?

[KillerCodeMonkey]

I do Not know. Because quilljs is just plain Javascript and CSS. You could try If setting viewencapsulation to shadowdom is working.

Default encapsulation of angular is using Data Attributes or Something Like this. So each CSS selector is suffixed by that.

Native Shadow Dom should Not so this

Bengt Weiße bengtler@googlemail.com schrieb am Mo., 23. März 2020, 18:02:

If your components is viewencapsulated The CSS selectors are Not matching and The Styling is not applied to quill Editor.

So Just import quil CSS aus global CSS or set View encapsulation to none vor your component.

mssaxian notifications@github.com schrieb am Mo., 23. März 2020, 17:57:

Adding @import '~quill/dist/quill.snow.css'; to my component css file works. Except not really. The editor display is broken as though it is getting no CSS. However, the quill.snow.css is getting imported. I know this because if I edit quill.snow.css by adding this to the bottom of the file,

• { background:red; }

the red does display. But none of the other styles in the file do.

I assume this is due to css classes getting prefixed for view encapsulation by angular.

How can I resolve this?

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/110#issuecomment-602727293, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARI4YFZFQDB22OILHRRM43RI6IHHANCNFSM4EQOABZA .

[vishwanath1004]

Facing the same issue. Any solutions? Thanks in advance.