stenciljs - StencilJS：编译 scss 并复制到 dist 文件夹

Question

我的目标是在分发包中提供一个 css 文件，如果需要，消费者可以使用它。

为此，我想创建一种全局 scss 文件，但我想避免这种样式附加到每个组件 + 它也不会被组件直接使用。因此，为此我想my-style.scss在文件夹中的某处创建文件/src。

编译这个文件my-style.css并将其复制到dist文件夹的最佳方法是什么？

Answer 1

It is possible to specify a global style with Stencil. Simply add the globalStyle property to your stencil.config.js and provide the entry scss file. Your config should look something like this:

const sass = require('@stencil/sass');

exports.config = {
  namespace: 'my-component-lib',
  outputTargets:[
    {
      type: 'dist'
    },
    {
      type: 'www',
      serviceWorker: false
    }
  ],
  globalStyle: 'src/globals/app.scss',
  plugins: [
    sass()
  ]
};

exports.devServer = {
  root: 'www',
  watchGlob: '**/**'
}

The build will successfully compile the scss to dist/my-component-lib.css.

Answer 2

来自文档：https ://stenciljs.com/docs/config/#copy

copyconfig 是一个对象数组，它定义了应该复制到构建目录的任何文件或文件夹。数组中的每个对象都必须包含一个src属性，该属性可以是绝对路径、相对路径或全局模式。配置还可以提供一个可选dest属性，该属性可以是绝对路径或相对于构建目录的路径。另请注意，为方便起见，其中的任何文件都会src/assets自动复制到www/assets。

在下面的复制配置中，它将整个目录从 src/docs-contentover 复制到www/docs-content.

在 stencil.config.ts 中：

copy: [
  { src: 'docs-content' }
]

例如，我将我的 css 文件从 src 复制到构建目录，它是完全独立的，例如https://github.com/BlazeUI/blaze/blob/master/packages/atoms/stencil.config.ts#L14