如何在基于Create React App的React应用.SASS文件中导入Compass？

Hey there! Let's get that Compass import working smoothly in your Create React App project. You've already got the right dependencies installed, so we just need to tweak the build configuration to make Sass recognize Compass. Here's how to do it:

Option 1: Use react-app-rewired (No Eject Required) #

This is the recommended approach since it lets you customize the build config without ejecting (which is irreversible).

1. Install two more dev dependencies to help with config overrides:

   npm install react-app-rewired customize-cra --save-dev
   

2. Create a config-overrides.js file in your project root directory, and add this code to configure the Sass loader with Compass support:

   const { override, addSassLoader } = require('customize-cra');
   const compassImporter = require('compass-importer');
   
   module.exports = override(
     addSassLoader({
       sassOptions: {
         importer: compassImporter(),
         includePaths: require('react-compass').includePaths
       }
     })
   );
   

3. Update your package.json scripts to use react-app-rewired instead of react-scripts:

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   }
   

4. Now you can import Compass modules directly in your .sass file! For example:

   # Import specific Compass modules
   @import "compass/css3"
   @import "compass/reset"
   
   # Or import the entire Compass library
   @import "compass"
   

Option 2: Eject Your Create React App (Irreversible) #

If you don't mind ejecting and taking full control of the build config, follow these steps:

1. Run the eject command (this can't be undone!):

   npm run eject
   

2. Open config/webpack.config.js and find the section where sass-loader is configured. Look for the options object under sass-loader, and add the Compass importer and include paths:

   {
     loader: require.resolve('sass-loader'),
     options: {
       sassOptions: {
         importer: require('compass-importer')(),
         includePaths: require('react-compass').includePaths,
         // Keep any existing options here
       },
     },
   }
   

3. Save the file, restart your dev server, and you'll be able to import Compass in your .sass files just like in the first option.

Quick Notes #

• Make sure your Sass files use the correct .sass extension (not .scss) since you mentioned using the indented syntax from the CodePen snippet.
• If you're using node-sass-chokidar to watch and compile Sass files manually, double-check that its configuration also includes the Compass include paths to avoid build errors.

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