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";
はどちらかそれをコンパイル、または私は、ファイルを解決できないというエラーが表示されます。私は、など、Googleの検索に基づいて、すべてのどの方法を試してみました。
エイリアスを使用してウェブパックを解決する方法はありますか？私の巣がかなり深くなるので、私はそれを避けることができれば、ここで相対的な道を見つけ出す必要はありません。私はそれを働かせるために、私が持っていれば私はします。
どうすればよいですか？