StencilJS -如何从node_modules导入css/sass？

Question

我正在尝试导入一个css文件，该文件包含node_modules包中的变量。

我试图从stencil.config.ts复制，但它一直将构建转储到我试图指定的位置，并且找不到下一步的信息。

我现在拥有的是这样的东西：

  type: "www",
  dir: 'src/global',
  copy: [
    { src: '../node_modules/package/design-tokens/dist/tokens.css', dest: 'themes' }
  ]
}

现在，我只需要进入node_modules并引用一个包含变量的css文件。

谢谢!

Answer 1

您是否尝试过直接从全局css文件中的节点模块导入该文件？

在stenil.config.ts中，你有

// stenil.config.ts
export const config: Config = {
  globalStyle: "src/global/app.css",
  ....
}

在app.css文件中，您可以从node_modules导入变量：

/*
 * app.css
 */

@import '~design-tokens/dist/tokens.css';

/*
 * Some other custom css here
 */

这里的~指的是node_modules文件夹，因此design_tokens是您在node_modules中安装的包。

您还可以考虑对您的app.css文件使用sass，如下所述：https://stenciljs.com/docs/plugins。因此，您可以使用链接中显示的@stencil/sass插件来处理编译，并将您的app.css重命名为app.sass。但是，如果您的设计令牌是CSS自定义属性，则不需要这样做。