質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

251閲覧

Webpack4 複数cssファイル出力それぞれにsourceMapを付与したい

kbash

総合スコア10

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/07/05 06:44

Wordpressのtheme開発にwebpack4導入を検討しています。

こちら https://teratail.com/questions/134422 で質問させていただいたような状況を経て、現在以下のようなwebpack-config.jsにて main.csseditor-style.cssの2つを出力しておりますが、sourceMapの出力ができなくなってしまいました。

(optionでsourcemapの吐き出しをtrueにする箇所が複数あるが、全て true にしてもNGでした)

おそらくちょっとした事だと思いますが、わからずご助言頂ければ幸いです。

###webpack-config.js

const MODE = 'development' const enabledSourceMap = (MODE === 'development') const path = require('path') const WP_THEME_NAME = 'project-name' const WP_THEME_PATH = '../wordpress/wp-content/themes/' + WP_THEME_NAME const PUBLIC_DIR_PATH = path.resolve(__dirname, '../wordpress') const PUBLIC_DIR_DIST_PATH = path.resolve(__dirname, WP_THEME_PATH) const PUBLIC_ASSETS_DIR_PATH = './assets' module.exports = { mode: MODE, entry: [ `./src/js/index.js`, `./src/scss/main.scss`, `./src/scss/editor-style.scss` ], output: { path: PUBLIC_DIR_DIST_PATH, filename: PUBLIC_ASSETS_DIR_PATH + '/js/app.js' }, devtool: 'source-map', devServer: { contentBase: PUBLIC_DIR_PATH, open: true, host: '0.0.0.0', disableHostCheck : true, public: '0.0.0.0', }, module: { rules: [ { test: /.scss$/, use: [ { loader: 'file-loader', options: { name: '[name].css', context: './src/css/', outputPath: 'assets/css/', publicPath: '../' } }, { loader: 'extract-loader', }, { loader: 'css-loader', options: { url: true, sourceMap: enabledSourceMap, minimize: true, }, }, { loader: 'resolve-url-loader' }, { loader: 'postcss-loader', options: { sourceMap: enabledSourceMap, plugins: [ require('autoprefixer')({grid: true}) ] }, }, { loader: 'sass-loader', options: { sourceMap: enabledSourceMap } } ] }, { test: /.(gif|png|jpg|eot|wof|woff|woff2|ttf|svg)$/, loader: 'url-loader' }, { test: /.js$/, use: [ { loader: 'babel-loader', options: { presets: [ ['env', {'modules': false}] ] } } ], exclude: /node_modules/, } ] }, }

使用中パッケージ

{ "devDependencies": { "autoprefixer": "^8.6.4", "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-preset-env": "^1.7.0", "css-loader": "^0.28.11", "extract-text-webpack-plugin": "^4.0.0-beta.0", "node-sass": "^4.9.0", "postcss-loader": "^2.1.5", "sass-loader": "^7.0.3", "style-loader": "^0.21.0", "url-loader": "^1.0.1", "webpack": "^4.12.2", "webpack-cli": "^3.0.8", "webpack-dev-server": "^3.1.4" }, "dependencies": { "browser-sync": "^2.24.5", "extract-loader": "^2.0.1", "file-loader": "^1.1.11", "jquery": "^3.3.1", "resolve-url-loader": "^2.3.0" } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問