5
我把一个反应项目一起使用webpack和LESS进行造型。我使用的是组件式结构，像这样：如何使用webpack less-loader从特定路径导入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文件少：
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使用别名来解决这些问题呢？我真的不想在这里找出相对路径，如果我能避免它，因为我的嵌套会变得很深。如果需要，我会尽快完成工作。
我该怎么做？