The CodePen Project Editor is designed to let you process your files without any tooling setup on your part, so you can get started building with your favorite languages right away. There are a few different ways you can choose how your project is processed.
Choosing a processor by using a compatible file extension
For most of our preprocessors, you can turn on processing for a file by giving it the appropriate file extension. The Project Editor will automatically generate a ‘processed’ version of the file for you.
These are the preprocessors that the Editor currently supports, and their file extensions.
|Sass (SCSS syntax)||.scss||CSS|
|Sass (indented syntax)||.sass||CSS|
For files that are in a preprocessor syntax, but you do not want to get processed, prefix the file name with an underscore (_).
Sometimes, you may not want every file with a particular file extension to get processed. For example, a SCSS project may use partial files, or a Pug project may have files for includes. By prefixing the file name with an underscore, the Editor will know not to create a processed file for that file. These files will still be available to the preprocessor for imports and include statements, they just won’t get their own output file.
.processed. file, you should use that link in your HTML.
Choosing a processor in the Project Settings
Some processors run on files without special file extensions, so you’ll need to elect to use these in the Project Settings.
By switching this processor on, all of your files with the
.css extension will be run through autoprefixer, including the processed output from other CSS processors. For example, you can create SCSS files and also run Autoprefixer on their resulting CSS.
- If you are using another processor already, Autoprefixer doesn’t create an additional file, it just runs Autoprefixer after the other processing is done.
- If you not using a CSS processor, Autoprefixer will make a
script.processed.js file you can link to for your HTML.
- URL-imports (e.g. Skypack) will be left alone.
- Babel is run over everything.
- JSX is processed.
When you turn on minification in your Project Settings, any file that is processed will also be minified. For example, your
style.css file will turn into
style.processed.css but also be minified, which it is not without turning on this setting. If you don’t use a processor of any kind, the file won’t be minified. Unlike Autoprefixer, just turning on this setting doesn’t automatically make a processed version