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"
あなたの回答
tips
プレビュー