Question

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

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

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

Answer 1

可以使用Stencil指定全局样式。只需将globalStyle属性添加到您的stencil.config.js并提供条目scss文件。您的配置应如下所示：

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: '**/**'
}

该版本将成功将scss编译为dist/my-component-lib.css。

Answer 2

从文档中：https://stenciljs.com/docs/config/#copy

90 REP != NaN False 91 REP != REP False 92 DEM != REP True 93 DEM != DEM False 94 DEM != DEM False配置是一个对象数组，用于定义任何文件或   应该复制到构建目录的文件夹。每个对象   数组中的值必须包含copy属性，该属性可以是   绝对路径，相对路径或全局模式。该配置还可以   提供可选的src属性，该属性可以是绝对值   路径或相对于构建目录的路径。另请注意   dest中的文件会自动复制到src/assets   方便。

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

在stencil.config.ts中：

www/docs-content

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

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

2 个答案: