kuri's notebook

気になったものごとの備忘録です。(このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

webpack4 + TypeScript + SCSS構成でCSSをJSに含めないようにする

個人的なプロジェクトでサーバサイドだけでなくクライアントサイドもこれまで使ったことがないツールを使ってみようと思い、タイトルのような構成にしてみました。

ただ、SPAではないのとHTTP/2を考えてJSのサイズを小さくしたかったのでCSSをJSから分割しました。

その設定をまとめました。

動作環境

ちょっとnodeのバージョンが古いですが、これでも動作しています。

  • Widnows 10 Pro

  • node v8.11.3

ディレクトリ構成

今回のディレクトリ構成は以下のようになります。

├─wwwroot
│  ├─js
│  └─css
├─scss
│   login.scss
├─ts
│   login.ts
├─package.json
├─postcss.config.js
├─tsconfig.json
└─webpack.config.js

webpackを実行するとwwwroot/js以下にJavaScriptが出力され、wwwroot/css以下にcssが出力されるようになります。

パッケージのインストール

今回はwebpackなどはグローバルインストールではなく、ローカルインストールにします。

npm i -D webpack webpack-cli typescript ts-loader sass-loader postcss-loader node-sass css-loader mini-css-extract-plugin autoprefixer

webpack-cliはwebpack4からコマンド実行時に必要なパッケージになります。

mini-css-extract-pluginがCSSに分割するためのプラグインです。

webpack3までは「extract-text-webpack-plugin 」を使用していましたが、以下の問題がありmini-css-extract-pluginにするようになっています。 github.com

github.com

webpack.config.jsの作成

webpack.config.jsをルート直下に作成します。

webpack4 + TypeScript + SCSS構成のwebpack設定(CSSはJSに含め ...

tsconfig.json

webpack4 + TypeScript + SCSS構成のTypeScriptコンパイル設定

npm run の設定

npm run webpack:devnpm run webpack:prodを実行するとwebpackが実行されるようにします。

scriptsを以下のように設定します。

  "scripts": {

    "webpack:dev": "webpack --mode development",

    "webpack:prod": "webpack --mode production"

  },

package.jsonの全体はこちら

webpack4 + TypeScript + SCSS構成

TypeScriptを用意する

実行のベースとなるTypeScriptのファイルを準備します。

今回はlogin.tsというファイル名にします。

// 取り込むSCSSを指定
import '../scss/login.scss'

console.log('aaaaa')

SCSSを配置

CSSコンパイルするSCSSを配置します。

/** 基本文字色を設定 */
body {
    color: #FF0000;
}

div.nav {
    flex: content;
}

webpackを実行

コマンドプロンプトからnpm run webpack:devを実行するとwwwroot以下がこのようになります。

├─wwwroot
│  │      
│  ├─js
│  │      main.js
│  │      main.js.map
│  │      
│  └─css
│          main.css
│          main.css.map
│          
└─scss
        main.scss
        login.scss

entrypointのキー名と同じ名前のjsとcssがソースマップ込みで作成されているのがわかります。

あとは利用するhtmlファイルがこれらを読み込むだけでOKです。

感想

webpack4が正式リリースされて間もないということもあり、cssの分割の情報がかなり錯綜していました(extract-text-webpack-pluginを使うかextract-text-webpack-plugin@nextになっているのがほとんど)。

とりあえず、CSSの分割ができたのでこれでASP.NET Coreアプリケーションに持って行けそうです。