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

【问题标题】：how to import LESS files from specific path using webpack less-loader?如何使用 webpack less-loader 从特定路径导入 LESS 文件？
【发布时间】：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 也使用别名来解决这些问题？如果可以避免的话，我真的不想在这里弄清楚相对路径，因为我的嵌套会变得很深。如果必须的话，我会让它工作。

我该怎么做？

【问题讨论】：

标签： reactjs styles 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，而且这个答案没有提供对已发布问题的修复。