How to change CSS to SCSS at React.js

Install necessary libraries

At first, install gulp;

npm install --save-dev gulp

Next, install gulp-sass.

npm install --save-dev gulp-sass

Above command is the command installing to local environment.
Of course you can install it into global environment, but it may break your other projects so I don’t recommend it.

Install node-sass.

npm install node-sass

Compile SCSS

Let’s compile your SCSS files.
Make gulpfile.js into the directory that have node_modules and package.json.

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

sass.compiler = require('node-sass');

gulp.task('default', function () {
  return gulp.src('./src/**/*.SCSS')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./src/css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.SCSS', ['sass']);
});

I explain this file.

See the following line:

return gulp.src('./src/**/*.SCSS')

It sets all SCSS files under ‘{your directory}/src/’ as compile targets.
If you write ./**/*.SCSS, compiler tris to compile SCSS files in node_modules and happen error.

Next, see the following line:

.pipe(gulp.dest('./src/css'));

Compiled files are set into ‘{your directory}/src/css’.
If you make subdirectories, they also be created.

The preparation is complete.
Move to the directory that have gulpfile.js with Terminal, and put following command.

npx gulp

CSS files are compiled.
Finally, you can use the CSS files.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です