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

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

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

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

Sass

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

CSS

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

Q&A

0回答

473閲覧

Webpack4 ExtractTextPlugin にて 複数のcssファイルを出力したい

kbash

総合スコア10

npm

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

Sass

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

CSS

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

0グッド

0クリップ

投稿2018/07/04 11:17

Wordpressのtheme開発にWebpack4を導入、ExtractTextPluginを使い wp-content/themes/project-name/assets/css フォルダへ main.css を出力しています。

wordpressの管理画面用css として editor-style.css を同出力先へ、 main.css とは別のファイルとして、新たに書き出したいと考えているのですが、うまくできません。

一台の webpack で複数の css ファイルを出力する方法をご教授頂ければ幸いです。

現在使用しているwebpack-config.jsは以下です。

webpack-config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin') 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`, 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', public: '0.0.0.0', disableHostCheck : true, }, module: { rules: [ { test: /.scss/, use : ExtractTextPlugin.extract({ use: [ { loader: 'css-loader', options: { url: true, sourceMap: enabledSourceMap, minimize: true, importLoaders: 2 }, }, { loader: 'postcss-loader', options: { sourceMap: true, 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/, } ] }, plugins: [ new ExtractTextPlugin(PUBLIC_ASSETS_DIR_PATH + '/css/main.css' ), ], }

###使用中パッケージ

"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"

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

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

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

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

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

kbash

2018/07/05 06:34

ありがとうございました。こちらの内容でおおよそ実現できました。がsourcemapの出力だけうまく行かず、別の投稿を作りたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問