webpackでSCSSだけコンパイルする環境
業務で利用するタスクランナーを最近gulpからwebpackに移行したので、勉強がてら家で同じ環境を作ってみようとしてハマった。。。
ハマったポイントとしてはnodeモジュールの依存関係
よくwebpack入門の記事で見るこういうサンプルコマンド
npm i -D webpack webpack-cli sass-loader sass style-loader css-loader何も考えずにやると、とてもハマる・・・（合計8時間くらい費やした・・・）
ハマった原因だったのがsass-loader
上記のコマンドを打って入れるsass-loaderは10.0.1がインストールされる（2020/09/03現在）のだけど、何との相性が悪いのかは不明だけど、びっくりするくらい全然動かない…
いろんな記事を見てsass-loaderを7系にダウングレードすると良いという記事を見つけようやく解決できました。
なので、忘れないうちに動作した環境のpackage.jsonとwebpack.config.jsを貼り付けー
/* package.json */
{
"name": "name",
"version": "1.0.0",
"description": "description",
"scripts": {
"dev": "webpack"
},
"devDependencies": {
"autoprefixer": "^9.8.6",
"css-loader": "^4.2.2",
"mini-css-extract-plugin": "^0.11.0",
"node-sass": "^4.14.1",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.2.0",
"string-replace-loader": "^2.3.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-fix-style-only-entries": "^0.5.1"
}
}/* webpack.config.js */
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
//webpack.config.js
module.exports = {
mode: 'development',
entry: {
'./style': './src/scss/style.scss'
},
// ファイルの出力設定
output: {
// 出力ファイルのディレクトリ名
path: `${__dirname}`,
// 出力ファイル名
filename: '[name].js'
},
module: {
rules: [
{
test: /\.scss/, // 対象となるファイルの拡張子
use: [
{ // JSデータをCSSとして外部ファイル化
loader: MiniCssExtractPlugin.loader
},
{ // CSSをJSに変換
loader: 'css-loader',
options: {
url: false,
sourceMap: true,
}
},
{ // PostCSSのための設定
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['ie >= 10', '> 5%']
})
]
}
},
{ // CSSの中身のソースを置換したい
loader: 'string-replace-loader',
options: {
multiple: [
{
search: '\n\n',
replace: '\n',
flags: 'g'
},
]
}
},
{ // SCSSをCSSに変換
loader: 'sass-loader',
options: {
outputStyle: 'compact'
}
},
]
}
]
},
plugins: [
// 不要なJSファイルは削除
new FixStyleOnlyEntriesPlugin({
silent: true
}),
// cssの出力先を指定する
new MiniCssExtractPlugin({
filename: '[name].css'
})
],
};
これで色々捗るようになる。
疲れた。。。