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。

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