使用CSS模块的全局SCSS (Gatsby)

Question

我试图在一个使用CSS模块的Gatsby项目中使用一些SCSS变量/字体。目前，我的项目结构如下：

src

├──组件

成本法

─/T1581-1998商品、商品、商业、金融、工业、金融等领域的商业、商业、金融等领域。

─/T1581-1998商品、商品、商业、金融、工业、金融等领域的商业、商业、金融等领域。

成本-成本

─/T1581-1998商品、商品、商业、金融、工业、金融等领域的商业、商业、金融等领域。

─/T1581-1998商品、商品、商业、金融、工业、金融等领域的商业、商业、金融等领域。

─/T1487-1993商业技术商品技术产品-商品-特别产品-特别产品( Layout.js )

─/T1581-1998商品、商品、商业、金融、工业、金融等领域的商业、商业、金融等领域。

├──页面

─/T1487-1993商业技术商品技术产品-商品-特别产品-特别产品( index.js )

├──风格

─/T1487-1993商业技术商品技术产品-商品-特别产品-特别产品( _typography.module.scss )

─/T1487-1993商业技术商品技术产品-商品-特别产品-特别产品( _variables.module.scss )

盖茨比博士建议将全局样式放入布局组件(包含页眉和页脚)，然后将其包装到所有其他组件。这对于包含在layout.module.scss文件中的样式来说很好，但是如果我将_variables.module.scss导入到这个文件中，那么我就不能使用其他SCSS文件中的变量(例如header.module.scss)。

构建应用程序以便访问模块中的全局变量/字体的最佳方法是什么？我是否只需要在需要时将部分文件导入所有单独的模块？

谢谢!

Answer 1

你有多种方法。我认为最好和直接的方法是在需要时将部分文件(变量、函数、混合器等)导入到每个单独的模块中，因为它将是该特定文件的依赖(它具有结构意义)。

如果您的系统和模块结构正确，webpack将树摇您的SCSS模块，并将删除死代码，所以您不需要担心导入相同的文件(比如说_variables.module.scss)到每个特定模块。