如何使用 webpack less-loader 从特定路径导入 LESS 文件？

Posted 2023-02-22

【中文标题】如何使用 webpack less-loader 从特定路径导入 LESS 文件？

【英文标题】：how to import LESS files from specific path using webpack less-loader?

【发布时间】：2016-09-08 20:14:25

【问题描述】：

我正在使用 webpack 和 LESS 将一个 react 项目放在一起进行样式设置。我正在使用这样的组件样式结构：

/root
    /src
        /components
           /MyComponent
               -index.js
               -index.less
       /styles
          -colors.less

我希望每个组件通过导入引用它自己的样式：

//MyComponent.js

import React from 'react';
import styles from './index.less';

...
<div className=styles.someclass >
...

在 index.less 中我想导入常见的共享样式。比如：

//index.less

@import "styles/colors.js";

.someclass 
   background: @themecolor;

这是我为 less 设置 webpack.config 文件的方法：

     resolve: 
    alias: 
        components: path.resolve(__dirname, 'src', 'components'),
        reducers:     path.resolve(__dirname, 'src', 'reducers'),
        actions:      path.resolve(__dirname, 'src', 'actions'),
        styles:       path.resolve(__dirname, 'src', 'styles'),
        images:       path.resolve(__dirname, 'src', 'images'),
        pages:        path.resolve(__dirname, 'src', 'pages'),
        lib:          path.resolve(__dirname, 'src', 'lib'),
        utils:        path.resolve(__dirname, 'src', 'utils'),
        examples:     path.resolve(__dirname, 'src', 'examples')
    ,
    extensions: ['', '.js','.jsx', '.css', 'png', 'less']
  , 

module: 
    loaders: [
         test: /\.jsx$/,
            loader: 'babel',
            include: path.join(__dirname, 'src')
        ,
         test: /\.js$/,
            loader: 'babel',
            exclude: /node_modules/

        ,
        
          test: /\.css$/,
            loader: "css-loader!autoprefixer-loader"
        ,
         
          test: /\.less$/,
            loader: "style!css!autoprefixer!less"
        ,
         test: /\.png$/,
            loader: "url-loader?limit=10000&minetype=image/jpg"
        
    ]
,

...

如你所见，我大量使用了 Webpack 的别名解析功能，所以我不必担心到处都是相对路径。

问题是我无法导入样式。我已经尝试了基于谷歌搜索的所有方式，包括：

@import "~styles/colors.less";  //not sure what the ~ does?
@import "/styles/colors.less";
@import  "styles/colors.less";
@import "../../styles/colors.less";

要么编译但样式不显示，要么我收到无法解析文件的错误。

有没有办法让 webpack 也使用别名来解决这些问题？如果可以避免的话，我真的不想在这里弄清楚相对路径，因为我的嵌套会变得很深。如果必须的话，我会让它工作。

我该怎么做？

【参考方案1】：

你已经成功了一半。如果我们在根目录下有/styles，请在您的 webpack 配置中添加以下解析：

const path = require('path')

module.exports = 
  module: 
    rules: [
      
        test: /\.less$/,
        use: [
          ...
          
            loader: 'less-loader',
            options: 
              lessOptions: 
                paths: [path.resolve(__dirname)],     <------ here
              ,
            ,
          ,
        ],
      ,
    ],
  ,
;

然后以~为前缀的路径导入：

@import "~styles/reset.less";

不确定 ~ 做什么？

~ 允许您从默认的 node_modules 以及您添加到 webpack 配置中的任意数量的已解析路径导入。

或者，如果您想从根目录下的/src 导入，请输入第二个参数，如：

paths: [path.resolve(__dirname, 'src')]

【参考方案2】：

~ 是一个 webpack less-loader 方便从node_modules 文件夹加载更少的文件。检查https://github.com/webpack-contrib/less-loader#imports

【讨论】：

虽然这通常是一个有用的提示（谢谢），但 OPs 问题没有提到 node_modules，而且这个答案没有提供对已发布问题的修复。