I do everything according to science - I download less.min.js from here lesscss.ru , put it in the project folder, connect it to the page as follows:

<link rel="stylesheet/less" href="./styles.less" type="text/less"> <script src="./less.min.js" type="text/javascript"></script>

In styles.less, I have styles in less, in less.min.js, respectively, the script itself, but for some reason nothing connects. The browser writes the following error:

Failed to load file: /// C: /% D0% 9F% D0% BE% D1% 80% D1% 82% D1% 84% D0% BE% D0% BB% D0% B8% D0% BE / Site / public / styles.less: Cross-border requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

The question is - what is the matter? Less valid in file, Winless verified.

  • don't you consider less from the gulp package? - user33274
  • one
    in your case, you need a local server - user33274
  • Do you open the page as a file ( file://... )? Raise the web server. Or see how people get chrome with the option --allow-file-access-from-files . When solve a problem, post the answer here. The problem is not in LESS, but in Chrome's security policy - Total Pusher

1 answer 1

Thank you very much for the tip, I completely forgot about the security policy. :)

While solving the problem with a local server, I found out that this way of connecting styles to a project is generally not optimal from the point of view of the extra work done by the client, and it is better to use an alternative one - collect everything (and styles including) into a bundle, and include the already prepared file js.

Just in case, the recipe - for assembly I used Webpack. In order for it to read the styles in less, in addition to the Webpack, you need to install the less-loader, CSS-loader, style-loader loaders, and configure the webpack.config.js file as follows:

 module.exports = { entry: './app.js', output: { filename: 'bundle.js' }, module: { rules: [{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }] }

};

The entry specifies the file to be assembled, and the output indicates the output file. In the loader, we list the loaders for processing less and css, and in test we write a regular list, by which the loaders find which file should be processed. The file with styles should be included in the app.js file:

 require('./less/main.less');

Now, after starting Webpack, we get the file bundle.js, which contains all the js-logic, styles and dependencies, which we include in index.html:

 <script src= "./dist/bundle.js" >

In this form, everything works.