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

Question

我正在使用 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;
}

以下是我如何设置 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 也使用别名来解决这些问题？如果我可以避免的话，我真的不想在这里找出相对路径，因为我的嵌套会变得很深。如果有必要的话，我会让它发挥作用。

我该怎么做？

Answer 1

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