初始布局少。有必要使媒体请求断开连接 - ＆gt;我们在app.less媒体中采取的基本风格 - 媒体 - 无媒体。现在你必须从它们编译2个css文件并将它们放在某个地方。
基于[https://github.com/vikpe/react-webpack-babel-starter]这个猪的基础。这里有webpack 3，或多或少是一种新鲜的试剂等等。
我把less-loader，我在common.js中规定
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}],
},
在我导入的反应组件中：导入'assets / less / app.less';并导入'assets / less / media.less';
所有工作，但较少没有在css文件中重新编译，它是用html构建的。不一样。接下来，在Dock中指示销售选项（通常，建议您将样式表提取到使用ExtractTextPlugin创建的单独文件，因此您的样式不依赖于JavaScript。）我将prod.js更改为
// production config
const merge = require('webpack-merge');
const {resolve} = require('path');
const commonConfig = require('./common');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractLess = new ExtractTextPlugin({
filename: "[name].[contenthash].css",
disable: process.env.NODE_ENV === "development"
});
module.exports = merge(commonConfig, {
entry: './index.js',
devtool: 'source-map',
output: {
filename: 'js/bundle.[hash].min.js',
path: resolve(__dirname, '../../dist'),
publicPath: '/',
},
module: {
rules: [{
test: /\.less$/,
use: extractLess.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"
}],
// use style-loader in development
fallback: "style-loader",
publicPath:"/css/"
})
}]
},
plugins: [
extractLess
]
});
我启动npm run start-prod，结果： 1.所有样式都写在一个css文件中（我需要它在2中），而不是我在publicPath中指向的那个。 2.在npm-debug.log错误
中0 info it worked if it ends with ok
1 verbose cli [ 'D:\\nodejs\\node.exe',
1 verbose cli 'D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'start-prod' ]
2 info using npm@4.0.5
3 info using node@v7.4.0
4 verbose run-script [ 'prestart-prod', 'start-prod', 'poststart-prod' ]
5 info lifecycle react-webpack-babel-starter@0.1.0~prestart-prod: react-webpack-babel-starter@0.1.0
6 silly lifecycle react-webpack-babel-starter@0.1.0~prestart-prod: no script for prestart-prod, continuing
7 info lifecycle react-webpack-babel-starter@0.1.0~start-prod: react-webpack-babel-starter@0.1.0
8 verbose lifecycle react-webpack-babel-starter@0.1.0~start-prod: unsafe-perm in lifecycle true
9 verbose lifecycle react-webpack-babel-starter@0.1.0~start-prod: PATH: D:\nodejs\node_modules\npm\bin\node-gyp-bin;F:\react-webpack-babel-starter-master-less\node_modules\.bin;C:\Users\daima\bin;D:\Git\mingw64\bin;D:\Git\usr\local\bin;D:\Git\usr\bin;D:\Git\usr\bin;D:\Git\mingw64\bin;D:\Git\usr\bin;C:\Users\daima\bin;C:\Program Files (x86)\Common Files\Intel\Shared Files\cpp\bin\Intel64;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;D:\Git\cmd;D:\nodejs;D:\Skype\Phone;C:\Program Files (x86)\QuickTime\QTSystem;D:\Visual Studio Code\bin;C:\Users\daima\AppData\Roaming\npm;D:\Git\usr\bin\vendor_perl;D:\Git\usr\bin\core_perl
10 verbose lifecycle react-webpack-babel-starter@0.1.0~start-prod: CWD: F:\react-webpack-babel-starter-master-less
11 silly lifecycle react-webpack-babel-starter@0.1.0~start-prod: Args: [ '/d /s /c', 'npm run build && node express.js' ]
12 silly lifecycle react-webpack-babel-starter@0.1.0~start-prod: Returned: code: 1 signal: null
13 info lifecycle react-webpack-babel-starter@0.1.0~start-prod: Failed to exec start-prod script
14 verbose stack Error: react-webpack-babel-starter@0.1.0 start-prod: `npm run build && node express.js`
14 verbose stack Exit status 1
14 verbose stack at EventEmitter.<anonymous> (D:\nodejs\node_modules\npm\lib\utils\lifecycle.js:279:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess.<anonymous> (D:\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:885:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid react-webpack-babel-starter@0.1.0
16 verbose cwd F:\react-webpack-babel-starter-master-less
17 error Windows_NT 6.1.7601
18 error argv "D:\\nodejs\\node.exe" "D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "start-prod"
19 error node v7.4.0
20 error npm v4.0.5
21 error code ELIFECYCLE
22 error react-webpack-babel-starter@0.1.0 start-prod: `npm run build && node express.js`
22 error Exit status 1
23 error Failed at the react-webpack-babel-starter@0.1.0 start-prod script 'npm run build && node express.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the react-webpack-babel-starter package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error npm run build && node express.js
23 error You can get information on how to open an issue for this project with:
23 error npm bugs react-webpack-babel-starter
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls react-webpack-babel-starter
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
如何解决我的问题？
答案 0 :(得分：0)
要获取两个css输出文件，您需要使用ExtractTextPlugin的两个实例并配置两个规则。
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// Create multiple instances
const extractApp = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractMedia = new ExtractTextPlugin('stylesheets/[name]-two.css');
module.exports = {
module: {
rules: [
{
test: /app\.less$/,
use: extractApp.extract([ 'css-loader', 'less-loader' ])
},
{
test: /media\.less$/,
use: extractMedia.extract([ 'css-loader', 'less-loader' ])
},
]
},
plugins: [
extractApp,
extractMedia
]
};