Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
dist
src
ReadMe.md
package.json
webpack.config.js

ReadMe.md

WebPack + SCSS with extract-text-webpack-pluginのサンプル

Sass(SCSSファイル)をwebpackで取り込みつつ、cssファイルとして出力するサンプルです。 extract-text-webpack-pluginの使い方を紹介します。

ゼロから環境構築する場合の手順

インストールコマンド

まずはpackage.jsonを作る。

npm init -y

その上で、必要なモジュールをインストールする。

npm i -D webpack webpack-cli css-loader node-sass sass-loader extract-text-webpack-plugin@next

webpack.config.js の書き方

webpack.config.jsのコードを参照ください。

webpackのデフォルト構成としているので、srcフォルダーにソースファイルを格納すること。デフォルトではエントリーポイントはsrc/index.jsである。

ビルドコマンド

npx webpack

distフォルダーに成果物が出力されます。