我有以下项目结构:
gatsby-config.js
/src
/components
layout.jsx
/button
button.jsx
button.scss
/pages
/styles
styles.scss
_mixins.scss
_variables.scss
和
gatsby-config.js
和styles.scss
分别通过以下方式配置:...
plugins: [
...,
`gatsby-plugin-sass`
]
...
@import 'variables',
'mixins';
为了访问mixin和变量,目前正在所有组件的scss文件中导入
styles.scss
,例如://button.scss
@import './../styles/styles.scss'
这种方法有效,但是问题是,随着项目的发展,
styles.scss
被多次导入,并且这种方法似乎出了问题。是否可以只导入
styles.scss
一次,并使所有mixin和变量在所有组件中都可用?
最佳答案
您可以通过gatsby-plugin-sass
将options传递给Sass。
以下选项可将./src/styles/_styles.scss
的内容全局公开给项目中的每个Sass文件,而无需显式导入。
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-sass',
options: {
data: `@import "${__dirname}/src/styles/styles";`,
}
},
],
}
注意:这对某些人可能是显而易见的,但值得将来的读者引用。
仅对仅包含变量,mixin,函数等的Sass文件执行此操作(除非使用了Sass功能,否则它们不会输出任何实际的CSS)。否则,您将获得在整个项目中重复多次的CSS。
Example repo
关于sass - 在全局范围内将sass包含在gatsby中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57833884/