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/
コメント