今日の環境
- Windows10 Home
- node 12.13.1
- npm 6.13.1
- webpack 4.41.2
- webpack-cli 3.2.3
mkdir webpack_4_scss_introduction
cd webpack_4_scss_introduction
npm initする
npm init
グローバルにインストール
npm install -g webpack webpack-cli
プロジェクトにインストール
npm install -D webpack webpack-cli
npm install -D webpack-import-glob-loader
npm install -D style-loader css-loader sass-loader node-sass postcss-loader autoprefixer
npm install -D mini-css-extract-plugin
mkdir src\scss\modules
copy nul src\scss\style.scss
copy nul src\scss\modules\_mod_example.scss
copy nul webpack.config.js
webpack.config.jsの編集
以下の通り記述
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
style: './src/scss/style.scss',
},
output: {
path: `${__dirname}/dist`,
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
// CSS内のurl()メソッドの取り込みを禁止する
url: false,
// ソースマップの利用有無
sourceMap: true,
// Sass+PostCSSの場合は2を指定
importLoaders: 2
},
},
{
loader: 'postcss-loader',
options: {
// PostCSS側でもソースマップを有効にする
sourceMap: true,
plugins: [
// Autoprefixerを有効化
// ベンダープレフィックスを自動付与する
require('autoprefixer')({ grid: true })
]
},
},
{
loader: 'sass-loader',
},
{
loader: 'webpack-import-glob-loader',
},
],
}
],
},
plugins:[
// cssの出力先を指定する
new MiniCssExtractPlugin({ filename: 'style/[name].css' }),
],
}
src/scss/style.scssの編集
webpack-import-glob-loader
をインストールしているのでglobパターンが使用できます。
@import "./modules/*";
src/scss/modules/_mod_example.scssの編集
autoprefixerが上手く機能しているか試す為に::placeholder
を記述してみます。
/*
残るコメント
*/
// 残らないコメント
.mod-example {
.mod-example__hoge {
background-image: url(../images/example.png);
}
::placeholder {
color: #aaaaaa;
}
}
ビルドしてみる
webpack --mode=development
webpack --mode=development --watch
生成されたstyle.cssを確認する
ベンダープレフィックスが付いているのが確認できました。