包裹:从npm模块捆绑CSS

时间:2019-09-13 06:36:18

标签: javascript css typescript firefox-webextensions parceljs

我正在使用parcel捆绑我的WebExtension。 例如,Babel polyfill是我的代码的某些部分正常工作所必需的,因此我正在这样导入它(在打字稿中):

import "@babel/polyfill";

捆绑程序会自动提取依赖项。如果没有polyfill,以下代码将无法工作,因为我的编译目标是es16:

$(async function(){
  //...

是否可以对CSS进行相同操作? 我的WebExtension将自定义HTML注入网站,其设计取决于Bootstrap。我可以在Typescript内容脚本中导入Bootstrap的Javascript部分。但是要注入CSS,我必须使用manifest.json文件:

"content_scripts": [
    {
      "matches": [
        "https://*.wikipedia.org/*"
      ],
      "js": [
        "./content.ts"
      ],
      "css": [
        "./assets/css/colors.css",
        "./assets/bootstrap/dist/css/bootstrap.min.css"
      ]
    }

docs

CSS assets can be imported from a JavaScript or HTML file:

import './index.css';

但是,如果我尝试这样做:

import "bootstrap/dist/css/bootstrap.min.css"

然后,引导程序设计消失了。

这在npm模块中如何工作?

0 个答案:

没有答案