Combine less files in webpack to generate a single minified CSS output file

Can webpack be used to combine multiple less files into one minified CSS file?
I'm having trouble setting different output paths for my files. How can I make my CSS file output to './assets/stylesheets/bundle/' instead of './assets/javascripts/bundle/'?

Update
I tested and successfully built my less files into a single css file. However, I still haven't figured out how to specify multiple output paths. Currently, I have to manually comment out the js entry part and change the output path...

webpack config

var path = require('path');
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: {
    'MediaIndex':['./assets/javascripts/Media/Index/Base.js'],
    // stylesheets
    'MediaIndexStyleSheet':['./assets/stylesheets/Media/Index/Base.js']
  },
  output: {
    path: './assets/javascripts/bundle/',
    filename: '[name].js'
  },
  resolve: {
    alias: {
      jquery: path.join(__dirname, "assets/javascripts/lib/jquery-1.11.1.min.js"),
      "jquery-ui": path.join(__dirname, "assets/javascripts/lib/jquery-ui.min.js"),
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    }),
    new ExtractTextPlugin("[name].css")
  ],
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
      }
    ]
  },
};

assets/stylesheets/Media/Index/Base.js

require('../../../Global/Config.less');
require('../../../Global/Fp.less');
require('../../../Global/Urb.less');
require('../../../Global/Ad1.less');
require('./Nav0.less');
require('./Index.less');
require('./Content.less');

Config.less

@color: 'red';

Index.less

body {
  background-color: @{color};
}

Answer №1

Just a few steps away from achieving your goal. By utilizing the ExtractTextPlugin, you can consolidate all of your styling into a single CSS file. If you wish to organize your JavaScript and CSS files into separate directories, simply specify a path within the ExtractTextPlugin or output.filename that is relative to your output.path. Here's an example:

output: {
    path: './assets',
    filename: './javascripts/bundle/[name].js'
},
plugins: [
    new ExtractTextPlugin("./stylesheets/bundle/[name].css")
]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The alignment of the image background is malfunctioning on the iPad 3 device

Hey there, I need some assistance resolving an issue with a header background image on iPad3. The problem is that the image is not displaying correctly on iPad3 browsers, even though it works fine on desktop browsers. Below you can find my CSS and HTML cod ...

The transmission of values to various conditionals in JavaScript

Within my input field, I am currently verifying two conditions... If the input field contains a valid email format If the input field ends with a certain domain $('#newsletter_submit').on('click', function () { document.getEleme ...

Converting dates to time in amCharts v3: A step-by-step guide

I am looking to exclusively show "6 AM" on my X AXIS, rather than displaying 2019-09-05 06:00:00 Please refer to my code sample at https://jsfiddle.net/uwtz3p4h/ Is it feasible to only display the time? I have searched through their documentation but co ...

Is the memory usage of node.js proportional to the number of concurrent requests, or is there a potential memory leak?

Running the following node.js code: var http = require('http'); http.createServer(function(req,res){ res.writeHead(200,{'Content-Type': 'text/plain'}); res.write("Hello"); res.end(); }).listen(8888); Upon starting the server ...

Arranging two tables, one slightly misplaced from the other

I have been searching through various websites, but I cannot find a solution to the specific issue I am facing. I am attempting to create a web page with a table aligned to the left side while keeping the rest centered. However, when I align items in the ...

A guide on transforming a JSON object representing an HTML element into a live HTML element for display on a webpage using C#, JavaScript, or jQuery

I am looking to retrieve a JSON object from a database and convert it into HTML format. Here is an example of the JSON structure: {"input":{ "name":"fname", "type":"text", "placeholder":"Ente ...

Is it possible to include Helvetica or a similar font in my web application for shipping?

My web-app is Java/HTML based and hosted on the cloud. Users will access it using IE, Chrome or Mozilla. I would like to use Helvetica or a similar font, but they are not readily available on most systems (windows/IE/Chrome/Mozilla). Is there a way for me ...

After uploading the WordPress theme, the wp_enqueue_style() function fails to work properly

I recently developed a new WordPress theme and encountered an issue while trying to load specific stylesheets for my child sites using the is_page(array('')) function in my function.php file. Surprisingly, only the files that were added to all of ...

What is the solution to removing the bottom margin from the jumbotron in the bootstrap framework?

I am building a website for my high school robotics team and I am new to HTML and CSS (bootstrap). I want to get rid of the gap between my banner and navbar on my site. Is there a way to remove that space? Check out our website: www.robotichive3774.com & ...

Is there a way to simplify this "stopwatch" even more?

Looking for advice on simplifying my JS stopwatch timer that currently only activates once and keeps running indefinitely. As a newcomer to JS, this is the best solution I could come up with: let time = 0 let activated = 0 function changePic() { if(a ...

Dealing with unresolved promises in async/await functions

What is the best approach for handling unresolved promises? For instance: class Utils { static async thisFunctionOnlyResolvesWhenPassed2AndNeverRejects(number: number) { return new Promise((resolve, reject) => { if(number === 2 ...

Learn how to show the current page number using React Js with the help of material-ui's

Take a look at the code snippet below from my App.js Component: const App = () => { const [workstations, setWorkstations] = useState([]); let [page, setPage] = useState(1); const PER_PAGE = 1; useEffect(() => { loadWorkstations(); }, [] ...

I'm having issues with my navigation bar, and the border on the right side is not functioning correctly

I've been struggling to get the right border positioned between each section of my nav bar. I've tried wrapping each word in a separate span, but it doesn't seem to cooperate. The borders end up on the side and are too small to fill the enti ...

Unable to generate file with Compass

In my attempts to compile a project using compass, I have experimented with both the gui app and the command line. However, I consistently encounter the same error message in both cases: "Nothing to compile. If you're trying to start a new project, yo ...

Rearrange and place items at the dropped location

I am looking to create a drag-and-drop feature for moving items from a list of products to an empty container. Upon completion, I need to save the location and the selected items in a database so that I can recall this layout later. However, I have encoun ...

What is the best way to implement Bootstrap 5 jQuery plugins in an ES6 project with Webpack?

Currently in the process of transitioning an ES6 project from Bootstrap 4 to Bootstrap 5, encountering the following error: Error: Uncaught TypeError: bootstrapElement.Tooltip is not a function According to the Migration Notes, Bootstrap 5 no longer inc ...

Leveraging body-parser alongside formidable

I am currently in the process of integrating formidable to handle forms that involve file uploads (specifically images). Despite comments suggesting otherwise, I came across a comment demonstrating successful integration of both modules. This snippet show ...

Comparing angular.isDefined and typeof

Is there an angular equivalent to the typeof operator in JavaScript that can detect variables not defined? I am specifically interested in the behavior of angular.isDefined() and how it differs from typeof. In the example below, the variable x is not Defin ...

How to Style Bootstrap 4 Tables with Rounded Borders

Currently, I am in the process of enhancing the design of a Bootstrap 4 table within a Node application using handlebars (.hbs). While I have been able to adjust the width of the table with CSS, I am encountering challenges in creating the desired borders ...

conversion of text to number using JavaScript

After pulling values from an XML file using JavaScript, I face the challenge of converting a string to an integer in order to perform calculations. To extract data from the XML file, I use the following snippet: var pop = JSON.stringify(feature.attribute ...