Importing Custom CSS Files

This guide is intended to help you seamlessly integrate new SCSS (Sassy CSS) files into your Eleventy project. SCSS is a powerful extension of CSS that allows you to use features like variables, nested rules, inline imports, and more. Our project structure is designed to make adding and managing styles as easy as possible.

File Structure

Your SCSS files are located in the src/scss directory. This folder typically contains several subdirectories to organize your styles, such as base, components, layout, etc., along with the main.scss file which acts as the entry point for all SCSS files.

Step-by-Step Guide

Create a New SCSS File:

  • Navigate to the src/scss directory.
  • Create a new SCSS file in the appropriate subdirectory. For example, if you're adding styles for a new component, place your file in the components folder.
  • Name your file descriptively, such as _my-new-component.scss. The underscore ('_') at the beginning is a Sass convention indicating that this file is a partial.

Add Your Styles:

  • Open your newly created SCSS file.
  • Write your SCSS code in this file. You can use all the features of SCSS such as variables, mixins, nested selectors, etc.

Import the New File in main.scss:

  • Open the main.scss file located in the src/scss directory.
  • Import your new SCSS file using the @import statement.
  • The import path should be relative to the main.scss file. For example, if your new file is _my-new-component.scss in the components folder, you would add @import 'components/my-new-component'; to main.scss.
// Example of importing a new SCSS file in main.scss
    @import 'components/my-new-component';

Note: You don't need to include the underscore (_) or the file extension (.scss) in your import statement.

Compile SCSS to CSS:

  • SCSS files need to be compiled into standard CSS. This is automatically handled during your build process with Webpack.
  • To see your changes, run your development script (npm run serve) which watches for changes and compiles SCSS files in real-time.