2

我正在尝试将 React 组件移植到 Stenciljs。

组件 .scss 文件具有另一个 A.scss 文件的 @import。该 A.scss 文件 @import bootstrap-sass/assets/stylesheet/bootstrap/_variables 和 @import 另一个 B.scss。

Stenciljs 可以处理吗，还是我需要将所有内容合并到一个文件中？

谢谢

4

4 回答 4

4

您可以导入其他 Sass 文件，无需将所有内容合并到一个文件中。

你可以继续使用 Sass，就像你在 React 中使用它一样，请记住，要能够将 Sass 与 StencilJS 一起使用，你必须安装 Sass 插件并将插件添加到plugins你的stencil.config.js.

有关更多信息，请查看 StencilJS 网站中的Sass 文档。

于 2018-03-07T03:17:58.433 回答
2

在您的stencil.config.ts（或stencil.config.js）中：

export const config: Config = {
  plugins: [
    sass({
      includePaths: [path.resolve(__dirname, 'path/to/styles')]
    })
  ]
};
于 2018-10-23T17:45:04.787 回答
1

是的，它可以处理 sass 文件及其导入。

安装模板/sass

npm i @stencil/sass -D

在你的stencil.config.ts文件中

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

export const config: Config = {
  // ... You configuration
  plugins: [
    sass({
      includePaths: ["./node_modules/"],
    }),
  ],

};

在上面的例子中，我们告诉 Stencil 编译器编译 sass 文件。该includePaths数组告诉编译器它应该查找 sass 文件的目录/文件。

为了@import从 nodejs 包中使用，您只需要： @import "~bootstrap-sass/assets/stylesheet/bootstrap/_variables"; 注意：这里的~运算符在不使用相对路径（./style.scss、../../style.scss 等）导入时是必需的；

如果您b.scss使用相对路径（./b.scss、../b.scss 等）导入文件，则无需在 sass 插件配置中添加任何其他内容。

我希望这能回答你的问题。

于 2020-04-19T01:56:40.697 回答
0

我从未尝试过多次导入，但我不明白为什么这不起作用。

要使模板与 .scss 一起使用，您应该安装此插件，如此处所述 

npm install @stencil/sass --save-dev

然后将此属性添加config到stencil.config.ts

plugins: [
    sass()
  ]
于 2020-03-13T05:29:52.697 回答