Answer the question
In order to leave comments, you need to log in
How to compile 2 less files into 2!!! css file to a specific location?
Initial layout in less. We need to make sure that media requests are disabled -> we take out the main styles in app.less, media - in media.less. Now it remains to compile 2 css files from them and put them in a certain place.
I took https://github.com/vikpe/react-webpack-babel-start... as a basis , this blank. Here is webpack 3, more or less fresh react, and so on.
I put less-loader, I register in 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
}],
},
in react component I import: import 'assets/less/app.less'; and import 'assets/less/media.less'; // 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
]
});
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 [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart-prod', 'start-prod', 'poststart-prod' ]
5 info lifecycle [email protected]~prestart-prod: [email protected]
6 silly lifecycle [email protected]~prestart-prod: no script for prestart-prod, continuing
7 info lifecycle [email protected]~start-prod: [email protected]
8 verbose lifecycle [email protected]~start-prod: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~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 [email protected]~start-prod: CWD: F:\react-webpack-babel-starter-master-less
11 silly lifecycle [email protected]~start-prod: Args: [ '/d /s /c', 'npm run build && node express.js' ]
12 silly lifecycle [email protected]~start-prod: Returned: code: 1 signal: null
13 info lifecycle [email protected]~start-prod: Failed to exec start-prod script
14 verbose stack Error: [email protected] 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 [email protected]
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 [email protected] start-prod: `npm run build && node express.js`
22 error Exit status 1
23 error Failed at the [email protected] 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 ]
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question