Issue with NPM and Local Host Preventing Proper Functionality of LESS CSS and Installation of LESS Package Control in Sublime 3

Completely new to LESS and running into trouble with my styles not showing up. I thought I had everything sorted out the other day, but now it seems like none of it is working.

I attempted to install the LESS Package Control, but that didn't work out either. I tried manual methods and even copied PHP code into the console with no success. I'm unsure if this could be affecting LESS in some way.

Changing the option to CSS on Sublime's bottom right corner resulted in an error in the console. Apologies for being a bit scattered with this, any assistance would be greatly appreciated.

Here is the code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title>NPM Build System w/ Less</title>
    <link rel="stylesheet/less" href="css/index.less">
</head>
<body>
    <h1>Made with Love</h1>
    <h2>Built with NPM</h2>
</body>
</html>

LESS:

@baker-miller-pink: #FF91AF;
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

body {
    background-color: @baker-miller-pink;
}

h1 {
    color: @nice-blue;
}

Package.json:

{
  "name": "npm-build-system",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "mkdir": "mkdir -p build",
    "build": "npm run clean && npm run mkdir && npm run build:html && npm run build:css",
    "watch": "npm run watch:html & npm run wathc:css",
    "clean": "rm -rf build",
    "build:html": "npm run clean:html && cp index.html build/",
    "clean:html": "rm -f build/index.html",
    "copy:index": "mv build/index.html ./",
    "watch:html": "npm run build:html && chokidar index.html -c 'npm run build:html'",
    "build:css" : "npm run clean:css && lessc --source-map css/index.less build/$npm_package_name.$npm_package_version.css",
    "watch:css" : "npm run build:css && chokidar 'css/**/*.less' -c 'npm run build:css'",
    "clean:css" : "rm -f build/$npm_package_name.$npm_package_version.css build/$npm_package_name.$npm_package_version.map",
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chokidar-cli": "^1.2.0",
    "less": "^2.6.1"
  }
}

Answer №1

To manage dependencies, you'll need either Grunt or Gulp. Take a look at this example:

less: {
            development: {
                options: {
                    compress: false,
                    optimization: 2,
                    sourceMap: true,
                    sourceMapFilename: './styles/style.css.map'
                },
                files: {
                    "app/styles/style.css": "app/styles/less/style.less"
                }
            },
}

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

Unable to successfully download npm packages - encountered an error running `[email protected] install: `node-pre-gyp install --fallback-to-build` on Ubuntu 18.04 system

I am facing an issue while trying to npm install (using lerna bootstrap) a project on Ubuntu 18.04. The error I encounter is related to node-pre-gyp install --fallback-to-build. I have attempted installing node-gyp, node-pre-gyp, and apt-get build-essenti ...

Navigating through child elements within a div using JavaScript

I recently coded a div using this snippet... let sidebarBox = document.createElement("div"); sidebarBox.id = "sidebarBox"; ...and then I created a second div like so... let sidebarAd = document.createElement("div"); sidebarAd.className = "sidebarAd"; B ...

What is the method for entering text into a Code Mirror line using Selenium?

When I use IE to enter text into a CodeMirror-line text box, the text disappears when I try to save it. I have attempted using JavascriptExecutor to write to the CodeMirror, but it seems to only be for visual purposes. How can I input text into the code mi ...

I'm trying to figure out how to save a Mongoose query and then pass it as a parameter to render an EJS page. How can I achieve this

I'm currently in the process of constructing an admin dashboard, and one feature I want to include is displaying mongoose data such as user information and recent tutoring sessions. However, I'm facing challenges when it comes to saving this data ...

What could be the reason for my jQuery focusout (or blur) event failing to trigger?

On the jsfiddle link provided, the HTML code at the end section looks like this: <input type="text" id="BLAboxPaymentAmount" value="2"> </br> <input type="text" id="BLAboxSection5Total" value="3"> Below that is the jQuery code snippet: ...

Encountering NodeJS server issues with 505/404 errors while fetching partials

I am currently working on an application built using the M.E.A.N stack. For routing, I have implemented Angular Ui Router. However, I am encountering difficulties in correctly routing partials. The link for the main view is functioning properly with the ...

Tips for placing an element in the top left corner and turning it into a functional "back to top" button

I need to add a "back to top" button on my website and I want to place it in the top left corner, as shown in the image above. Here is the HTML code I am using in my Jekyll site: <body> <a name="top"></a> <a href="#top" id="to ...

The switch statement is not functioning properly when the button is pressed

I am trying to trigger an alert inside a switch statement when I click a button, but for some reason, it is not working. Even if I simply have an alert in the previous function, there is no output on my website. What could be causing this issue? Here is ...

Styling the TinyMCE Toolbar within a Div container

While working on creating a unified TinyMCE toolbar that is fixed at the top of multiple containers within a div wrapper, I encountered an issue where the CSS styling of the toolbar was lost after wrapping. The toolbar only displayed hyperlink URLs inste ...

The FormidableJS form encounters parsing issues when submitted through AngularJS

I have encountered an issue while posting to a formidable form from AngularJS. The form does not parse, and I suspect it might have something to do with the lack of express.bodyParser(). Server-side: ... var form = new formidable.IncomingForm(); console. ...

Unable to implement CSS styles on the provided HTML code

I'm currently working on integrating evoPDF into my asp.net application. When I click on a part of the HTML file, I send that portion using AJAX. So far, everything is working well up to this point. However, when I try to use the following methods fro ...

A guide to customizing nested elements in react using styled-components

Currently, I am utilizing styled components to apply styles to a child element inside a div using nested css. For a demonstration, you can view my example here const customStyles = theme => ({ root: { ...theme.typography.button, background ...

CSS - Adding a Distinctive "Line" to a Navigation Bar

I am attempting to design a unique navbar layout with two "lines". The first line should consist of several links, while the second line would include an HTML select field with a submit button. The following code will generate the desired navbar visual ou ...

Accessing secure managed Redis using Node.js authentication credentials

Upon further reflection, the question that arises is how to connect to digitalocean's managed redis with node-redis using tls. Although I can establish a connection with the redisinsight GUI client using a username and password without any issues, I ...

Display various information with every "show details" button clicked on the Bootstrap Vue table row

My table has rows with multiple "More Details" buttons that, when clicked, reveal additional information specific to that row. The goal is to display information X when the first "More Details" button is clicked and information Y when the second "More Deta ...

Looking to include an if/then statement for an item that has been generated within a div?

While I may not be a seasoned programmer, I am facing an issue that requires some problem-solving. Allow me to explain the situation to the best of my ability. Within a "div" element, I have implemented a v-for loop that sets a value in a variable for dis ...

Can a React component be configured to show only a specific array key when returning an array?

Just diving into the world of react and experimenting with different approaches to understand how I can transition into this new architecture. Currently, I have a basic component where I am returning an array of elements (mainly for testing purposes): cl ...

Facing issues with nodejs socket.io communication on a local network

I've been working on setting up a chat feature for my website, but I'm running into issues getting socket.io to function properly on my local network (it works fine for localhost but not when accessed from another machine). Here is the server-sid ...

Guide on passing a JSON body as a string in a PUT API request using Fetch in a React.js application

How can I pass a JSON body as a string in a FETCH PUT API in React JS? I am attempting to add 20 to the Balance like this: Balance: details[0].Balance.toString() + 20, but it is not working as expected. I want the entire result to be a string. Any assista ...

Creating a JQuery slider that efficiently loads and displays groups of elements consecutively

Currently, I am in the process of developing an infinite horizontal tab slider using jQuery. My main objective is to optimize loading time by having the slider display only the first 10 slides upon initial page load. Subsequent slides will be loaded as the ...