Исходная верстка в less. Нужно сделать, чтобы media запросы отключались -> основные стили выносим в app.less, media - в media.less. Теперь осталось скомпилить из них 2 css файла и засунуть в определенное место.
За основу взял
https://github.com/vikpe/react-webpack-babel-start... вот эту болванку. Тут 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
}],
},
в реактовском компоненте импортирую: import 'assets/less/app.less'; и import 'assets/less/media.less';
Все работает, но less не перекомпилился в css-файл а встроился в html. Кароче не то. Далее в доках указан вариант для прода (Как правило, рекомендуется извлекать таблицы стилей в отдельный файл, созданный с помощью 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
]
});
стратую и в результате:
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 ]
Как разрешить мою задачку?
Простой
Средний
Простой