JavaScriptとSASSを別ファイルでコンパイルする手順【webpack環境構築】
今回はwebpackを利用してJavaScriptとSASSをコンパイルする環境構築の手順をお伝えします。
LP制作などでSASSを利用したい方は多いと思います。
SASSは変数の設定ができるなど、とても便利ですがそのままでは利用できません。
CSSファイルにコンパイル（変換）する必要があります。
webpackを利用すればSASSはもちろん、JavaScriptも同時にコンパイルし、別ファイルで出力できます。
手順
- 作業フォルダの作成
- webpackをインストール
- Babel関連のモジュールを追加
- 別ファイルで出力するためのモジュールを追加
- SASSの準備
- JavaScriptの準備
- package.jsonの編集
- webpack.config.jsの編集
スポンサードサーチ
作業フォルダの作成
まずは作業フォルダを作成します。
今回は「testapp」という名前のフォルダで作業していきます。
ターミナルで以下のコマンドを実行してください。
mkdir testappwebpackをインストール
次にwebpackをインストールします。
プロジェクトごとにインストールするのが一般的です。
今回は「testapp」にwebpackをインストールします。
以下3つのコマンドを実行してください。
cd testapp
npm init -y
npm i -D webpack webpack-cliスポンサードサーチ
Babel関連のモジュールを追加
続いて以下のコマンドでBabel関連のモジュールを追加します。
npm i -D @babel/core @babel/preset-env babel-loader別ファイルで出力するためのモジュールを追加
以下のコマンドで別ファイルで出力するためのモジュールを追加します。
npm i mini-css-extract-pluginスポンサードサーチ
SASSの準備
以下のコマンドでSASS関連のモジュールを追加します。
npm i -D sass-loader node-sass css-loaderモジュールの追加は以上です。
ここまででpackage.jsonは以下のようになっていると思います
エディタで「testapp」を開き、確認してみてください。
{
"name": "testapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.13.13",
"@babel/preset-env": "^7.13.12",
"babel-loader": "^8.2.2",
"node-sass": "^5.0.0",
"sass-loader": "^11.0.1",
"webpack": "^5.28.0",
"webpack-cli": "^4.6.0"
},
"dependencies": {
"mini-css-extract-plugin": "^1.4.0"
}
}次にコンパイルするファイルの編集をします。
「src」フォルダを作成してください。
その中に「scss」フォルダを作成し、「main.scss」を作成、編集します。
$my-color: red;
body {
background-color: $my-color;
}JavaScriptの準備
同じように「src」に「js」フォルダを作成し、その中に「main.js」と「test.js」を作成、編集します。
main.js
import '../scss/main.scss';
import test from './test';
test();
test.js
export default function test() {
alert('test!!!');
}スポンサードサーチ
package.jsonの編集
package.jsonのscriptsを以下のように編集します。
{
"name": "testapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"watch": "webpack --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.13.13",
"@babel/preset-env": "^7.13.12",
"babel-loader": "^8.2.2",
"css-loader": "^5.2.0",
"node-sass": "^5.0.0",
"sass-loader": "^11.0.1",
"webpack": "^5.28.0",
"webpack-cli": "^4.6.0"
},
"dependencies": {
"mini-css-extract-plugin": "^1.4.0"
}
}この編集により、
npm run buildのコマンドでJavaScriptとSASSファイルのコンパイルができます。また、
npm run watchでファイルの編集を常時監視することもできます。
webpack.config.jsの編集
最後にwebpack.config.jsの編集をします。
「src」フォルダなどと同じ階層に「webpack.config.js」を作成し、以下のように編集してください。
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
// コンパイル元のファイルを設定
entry: './src/js/main.js',
// JavaScriptのコンパイル先とファイル名を設定
// この場合はdistフォルダにbundle.jsという名前でコンパイルする
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
]
}
}
],
exclude: /node_modules/,
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false,
}
},
{
loader: 'sass-loader'
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// SASSのコンパイル後のファイル名を設定
// コンパイル先はoutputに設定したフォルダ
// この場合はdistフォルダにstyle.cssという名前でコンパイルする
filename: 'style.css',
})
]
};これで準備完了です。
npm run buildを実行することで、JavaScriptとSASSを同時にコンパイルし、別ファイルで出力できます。
まとめ
いかがだったでしょうか。
プログラミング初心者にとって環境構築はとっつきにくいイメージがあると思います。
ですが、実務では避けて通ることはできません。
ぜひwebpackを使ってチャレンジしてみてください。
自分も引き続き勉強していきます。
プログラミングを動画で学ぶなら
プログラミングをオンラインスクールで学ぶなら