A
A
Aleksandrov2018-03-15 10:16:32
css
Aleksandrov, 2018-03-15 10:16:32

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';
Everything works, but less was not recompiled into a css file, but embedded into html. In short, it's not. Next in the docs is the option for prod (It's generally recommended to extract stylesheets to a separate file created with ExtractTextPlugin . This way your styles don't depend on JavaScript) Change prod.js to
// 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
    ]
});

and as a result:
1. all styles are written in one css file (and I need 2), and not where I specified in publicPath.
2. errors in 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 [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 ]

How to solve my problem?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question