mixins.less | 基于 Less 的 CSS 代码片段复用和混入库 | Style Language library

This is most likely a path error.

Try

You seem to use bootstrap with LESS in a SCSS file. I'd suggest to try the SASS version.

If you are using Web Compiler, you can right click the .less file and remove it from compilation:

First off, your post contains A LOT of questions. It would be better to separate them in different ones. Anyway, your questions are to:

• Resolve LESS files
• Compile LESS to CSS
• Minify CSS
• Extract CSS to another file (This isn't a part of your question, but webpack is called a 'bundler' for a reason. It will include CSS in a single bundle.)
• Minify Javascript
• Rebuild when changed

I could just slap together a config file for you, but where's the fun in that?

If you want to compile your less into css using webpack, you have to import the file into your Javascript. Otherwise, webpack won't know what files you want to include. Rules just tell webpack what to do with imports of less files. It won't look for them on its own. Also, you need to set your Javascript file as your entry point. Make sure that the styles.less file imports the other less files in order to get the complete css file, or import all less files individually.

You need something like:

Posting the answer myself based on seven-phases-max's comments.

Previously the scope of the @lang variable was the same throughout and when lazy-loading kicked in, @lang was allocated the most recent value given to it. We need to isolate the scope when changing the value of @lang by adding an unnamed namespace and then importing the mixins and styles in the same scope which will produce the desired result.

Below is the code snippet:

After further investigation via the comments above, it seems the issue was that @import "mixins/vendor-prefixes.less"; was commented out in the mixins.less file. I recommend uncommenting that line.

Please ensure that Track only root files option is enabled in that particular File Watcher settings -- it does just that.

From https://www.jetbrains.com/help/phpstorm/2016.3/new-watcher-dialog.html#d199014e291

When the File Watcher is invoked on a file, PhpStorm detects all the files in which this file is included. For each of these files, in its turn, PhpStorm again detects the files into which it is included. This operation is repeated recursively until PhpStorm reaches the files that are not included anywhere within the specified scope. These files are referred to as root files (do not confuse with content roots).

• When this check box is selected, the File Watcher runs only against the root files.
• When the check box is cleared, the File Watcher runs against the file from which it is invoked and against all the files in which this file is included recursively within the specified scope.