Compiling Less to Css using Webpack

Question

I am trying to compile my less into css, but having some troubles understanding what is wrong.

I am currently using webpack 4.1.1 .

I have the following webpack.config.js file:

//Modules
const path = require('path');
const webpack = require('webpack'); //to access built-in plugins
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractLess = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
    entry: './src/assets/js/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    // webpack-dev-server config for refreshing and more
    devServer: {
        contentBase: './dist',
    },


    //In order to import a CSS file from within a JavaScript module
    module: {
        rules: [
            {
                test: /\.less$/,
                issuer: /\.less$/,
                include: [
                    path.resolve(__dirname, "less")
                ],
                use: [
                    {loader: "style-loader"},
                    {loader: "css-loader"},
                    {loader: "less-loader"}
                ]
            },

            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        extractLess
    ]
};

The error I am getting is as follow:

Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @icon-font-path: "~bootstrap3/fonts/"; | @import '~bootstrap3/less/bootstrap';

What am I doing wrong?

lukas-reineke · Accepted Answer · 2018-03-15 09:22:29Z

1

The bootstrap files you want to load are in your ./node_modules directory. But in your less rules you are limiting the loader to just ./less
Add this to the include array.

path.resolve(__dirname, "node_modules")

answered Mar 15, 2018 at 9:22

lukas-reineke

3,3422 gold badges21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Compiling Less to Css using Webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related