在Netlify CMS自定义预览中添加SASS模块导致Gatsby构建失败

问题根源 #

Netlify CMS的预览环境使用独立的Webpack配置，gatsby-plugin-sass仅配置了Gatsby主应用的Webpack规则，并未覆盖CMS预览环境，导致SCSS文件无法被解析，出现Module parse failed: Unexpected token错误。

解决方案 #

方案1：编译SCSS为静态CSS后加载 #

适合全局样式或简单组件样式场景：

• 在package.json中添加SCSS编译脚本，自动将SCSS转为静态CSS：

  "scripts": {
    "build:cms-styles": "sass src/styles/global.scss static/cms-preview.css",
    "predevelop": "npm run build:cms-styles",
    "prebuild": "npm run build:cms-styles"
  }
  

• 在src/cms/cms.js中注册编译好的静态CSS文件：

  import CMS from 'netlify-cms-app';
  // 加载全局预览样式
  CMS.registerPreviewStyle('/cms-preview.css');
  // 注册你的预览模板
  // CMS.registerPreviewTemplate('name', PreviewTesting);
  

• 组件级SCSS模块可单独编译为CSS后引入，或合并到全局预览CSS中。

方案2：自定义Netlify CMS的Webpack配置（推荐） #

此方案让CMS预览环境直接支持SCSS及SCSS模块，与主应用保持一致：

1. 安装必要依赖（若未安装）：

   npm install style-loader css-loader sass-loader --save-dev
   

2. 修改gatsby-config.js中gatsby-plugin-netlify-cms的配置：

   module.exports = {
     plugins: [
       {
         resolve: `gatsby-plugin-netlify-cms`,
         options: {
           customizeWebpackConfig: (config, { stage }) => {
             // 针对开发与构建阶段添加SCSS解析规则
             if (stage === 'develop' || stage === 'build-javascript') {
               // 处理SCSS模块
               config.module.rules.push({
                 test: /\.module\.s[ac]ss$/i,
                 use: [
                   'style-loader',
                   {
                     loader: 'css-loader',
                     options: {
                       modules: {
                         localIdentName: '[name]__[local]--[hash:base64:5]',
                       },
                     },
                   },
                   'sass-loader',
                 ],
               });
               // 处理非模块SCSS文件
               config.module.rules.push({
                 test: /^((?!\.module).)*s[ac]ss$/i,
                 use: ['style-loader', 'css-loader', 'sass-loader'],
               });
             }
             return config;
           },
         },
       },
       // 其他Gatsby插件...
     ],
   };
   

3. 重启开发服务后，即可在预览组件中正常导入SCSS模块：

   import * as styles from './PreviewTesting.module.scss';
   

方案3：改用CSS-in-JS方案 #

若不想配置Webpack，可使用CSS-in-JS库（如styled-components）编写预览组件样式，CMS预览环境原生支持此类方案：

import styled from 'styled-components';

const PreviewDescription = styled.div`
  background-color: lightgoldenrodyellow;
  font-family: 'Montserrat-Regular', sans-serif;
`;

const PreviewTesting = ({ entry }) => {
  const data = entry.getIn(['data']).toJS();
  return (
    <div>
      <h1>{data.title}</h1>
      <PreviewDescription>{data.subtitle}</PreviewDescription>
    </div>
  );
};

export default PreviewTesting;

内容的提问来源于stack exchange，提问作者Des