StencilJs设置类型

Question

几周前我开始使用Stencil，我想知道是否有一种方法可以设置一个全局的sass文件来处理拼写错误。

我已经在全局文件夹下创建了一个variables.scss文件，我也尝试了global.scss，但没有成功。

Answer 1

有一个globalStyle配置选项(参见https://stenciljs.com/docs/config#globalstyle)。

如果你已经在你的项目中使用@stencil/sass，那么你只需要添加配置选项：

// stencil.config.ts

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';

export const config: Config {
  namespace: 'app',
  plugins: [sass()],
  // ...
  globalStyle: 'src/global/variables.scss'
};

如果您希望在全局样式表中包含多个文件，那么有一个像src/global/app.scss这样的文件，然后使用@import在其中包含其他文件是很有意义的。

请注意，这将生成一个文件www/build/<namespace>.css (用于www输出目标)，您必须手动将其包含在index.html的头部中：

<link rel="stylesheet" href="/build/app.css">