Webpack4 で Sassをcssとして出力する

Sass

webpackでsassを普通に使うと、JSファイルにまとまってしまうのですが
cssにファイルを分けたいことがあると思います。

細かいことはいいからコピペして、サクッと動かしたい人用にまとめました。
webpack.config.jsだけまとめて見たい人はこちら

環境構築〜webpack4でsassをcssとして出力するまで

webpackとパッケージ導入

projectnameフォルダを作成してその中にwebpackを導入していきます。

コマンドライン(Macだとターミナル)を起動。

コマンドラインにコピペ+Enter

mkdir projectname
cd projectname
npm init -y

自動作成されたpackage.jsonを編集

projectnameフォルダ下に作成されたpackafe.jsonを編集していきます。
黄色部分だけ編集すれば、あとはほっといてOK。

{
  "name": "projectname",
  "version": "1.0.0",
  "description": "このプロジェクトの説明文は適当に書きます。",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "repository": { // git使ってない人は表示されないかもですがほっといて良し。
    "type": "git",
    "url": "個人情報なのでここでは伏せておきます"
  },
  "keywords": [],
  "author": "自分の名前を入れておきます(ニックネームでもなんでも可)",
  "license": "ISC",
  "bugs": {
    "url": "個人情報なのでここでは伏せておきます"
  },
  "homepage": "個人情報なのでここでは伏せておきます",
  "devDependencies": { // この辺も自動で追加されるので無視
    "@babel/core": "^7.3.3",
    "@babel/preset-env": "^7.3.1",
    "autoprefixer": "^9.4.7",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "cssnano": "^4.1.10",
    "node-sass": "^4.11.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.29.4",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "mini-css-extract-plugin": "^0.5.0"
  }
}

コマンドラインにコピペ+Enter

npm i -D webpack webpack-cli css-loader sass-loader node-sass autoprefixer postcss-loader
npm i mini-css-extract-plugin
touch webpack.config.js

作成されたwebpack.config.jsにコピぺ

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

  mode: 'development',

  entry: {
      "style": "./src/scss/main.scss",
  },

  devtool: "source-map",//ソースマップツールを有効

  output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
  },

  module: {
    rules: [
    {
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,// JSとしてバンドルせず、CSSファイルで出力
        {
          loader: 'css-loader',//css-loaderでCSSの依存関係を解決
          options: {
              url: false, // url()を変換しない
              sourceMap: true//ソースマップツールを有効
          }
        },
        {
          loader: 'postcss-loader',
          options: {
              sourceMap: true, //ソースマップを有効
              plugins: [
                  require('cssnano')({
                      preset: 'default',
                   }),
                  require('autoprefixer')({
                      grid: true, // CSS Grid Layout
                      "browsers": [
                          "> 1%",
                          "IE 10"
                      ]
                  })
              ]
          }
        },
        {
          loader: 'sass-loader',//SASSをCSSに変換
          options: {
              sourceMap: true//ソースマップツールを有効
          }
        }
      ]
    }
  ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/style.css',
    })
  ]
};

 

必要なファイルどんどん作っていくよ

コマンドラインにコピペ+Enter

mkdir src
mkdir src/scss
touch src/scss/main.scss

作成されたmain.scssにコピペ

@charset "UTF-8";

html {

  body {
    background: #000000;
  }
}

いよいよsassをcssで出力・・・!

コマンドラインにコピペ+Enter

npm run build

 

これでdist/css/style.cssが圧縮した状態で出力されているはずです!

参考サイト

http://www.kantenna.com/pg/2018/05/webpack_scss.php
https://www.expexp.jp/webpack/

コメント