如何在Gatsby项目中规范引入并配置Sass与CSS？-css教程-PHP中文网

sass 和 css 在 gatsby 中是分层协作关系：全局 css 可直接 import，而 sass 需通过 gatsby-plugin-sass 插件支持，且必须安装 sass（dart sass）；二者最终均经同一 css 处理管线输出。

如何在gatsby项目中规范引入并配置sass与css？

直接结论：Sass 和 CSS 在 Gatsby 中不是“二选一”，而是分层协作关系——全局 CSS 用 import 直接引入，Sass 需要 gatsby-plugin-sass 插件支持，且必须确保 sass（Dart Sass）已安装；二者共存时，Sass 编译结果最终也走同一套 CSS 处理管线。

为什么 import "./index.css" 能直接工作，但 import "./index.scss" 会报错？

因为 Gatsby 内置的 webpack 规则只匹配 /\.css$/，不识别 .scss 或 .sass 后缀。当你写 import "./index.scss"，webpack 找不到对应的 loader，就会抛出类似 Module parse failed: Unexpected character '@' 的错误。

解决路径很明确：

装插件：npm install sass gatsby-plugin-sass（sass 是必需 peer dependency，不能省）
注册插件：gatsby-config.js 中加入 `gatsby-plugin-sass`
确保文件后缀是 .scss 或 .sass，且内容符合 Sass 语法（比如允许 @import、$variable）

全局 CSS 和 Sass 入口该放哪？Layout 还是 gatsby-browser.js？

推荐统一放在共享 Layout 组件中，例如 src/layouts/index.js 里写 import "../styles/main.scss"。这样所有使用该 Layout 的页面都会带上样式，且 SSR 时能正确注入 <style></style> 标签。

gatsby-browser.js 也能用，但有明显限制：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

它只在浏览器端运行，服务端渲染（SSR）阶段不执行，可能导致首屏样式缺失或 FOUC（闪白）
无法配合 gatsby-plugin-sass 的 SSR 支持链路（插件在 develop-html/build-html 阶段会跳过样式加载，避免 Node 环境报错）
如果项目用了 CSS-in-JS（如 styled-components），gatsby-browser.js 引入的全局 CSS 无法和它们共享主题上下文

多个 Sass 文件怎么组织？@import 和 @use 有什么区别？

Gatsby 默认用 Dart Sass（sass 包），它从 v1.23.0 开始推荐用 @use 替代 @import。实际影响很大：

@import 是全局合并，变量/混合（mixin）会污染全局命名空间，容易冲突
@use 是模块化引入，默认只暴露带前缀的成员（如 bulma.button），更安全可维护
Gatsby 项目中若混用两者，@import 的文件仍能工作，但会被 Sass 官方警告 “@import rules are deprecated”

典型结构示例：

// src/styles/main.scss
@use "bulma/sass/utilities/initial-variables";
@use "bulma/sass/utilities/functions";
@use "bulma/sass/grid/columns";

// 自定义覆盖
$primary: #2a9d8f;

@use "bulma/sass/base/generic";
@use "bulma/sass/elements/button";

为什么改了 Sass 变量，CSS 没更新？热重载失效的常见原因

不是 Gatsby 的锅，而是 Sass 编译依赖的“文件追踪”机制被绕过了。最常踩的坑是：

在 main.scss 里用 @import "../node_modules/bulma/sass/base/_all.sass" —— 这种硬路径会让 webpack 无法监听 node_modules 内部变更，修改 Bulma 源码不会触发重编译
变量文件（如 _variables.scss）没被任何入口文件 @use 或 @import，它就只是个“死文件”，Sass 不会处理它
用了 gatsby-plugin-sass 的 cssLoaderOptions 但配置了 importLoaders: 0，导致 postcss-loader 被跳过，autoprefixer 等失效，看起来像“没变”