Question

我正在使用webpack和LESS将反应项目放在一起进行样式化。我正在使用组件样式结构：

/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文件设置为less的方法：

     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

您在那儿。假设我们在根目录下有/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')]

Answer 2

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

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

2 个答案: