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

Question

我正在尝试从 node_modules 包中导入具有变量的 css 文件。

我试图从 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中安装的包。

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