Web paketini daha az yükleyici kullanarak LESS dosyalarını belirli bir yoldan nasıl alabilirim?

Question

Web paketi ve stil için stil kullanarak bir tepki projesi hazırlıyorum. Ben şöyle bileşeni tarzı yapısı kullanıyorum:

/root 
    /src 
     /components 
      /MyComponent 
       -index.js 
       -index.less 
     /styles 
      -colors.less 

Ben bir ithalat yoluyla kendi stillerini var başvurmak için her bileşeni istiyorum:

//MyComponent.js 

import React from 'react'; 
import styles from './index.less'; 

... 
<div className={styles.someclass} > 
... 

index.less içinde ben ortak paylaşılan stiller almak istediğiniz . Bir şey gibi: Ne için ayarlanmış webpack.config dosyaları var nasıl

İşte

//index.less 

@import "styles/colors.js"; 

.someclass { 
    background: @themecolor; 
} 

daha az:

 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" 
     } 
    ] 
}, 

... 

ben WebPack en takma çözmek özelliği geniş kullanımı yapmak görebilirsiniz, bu yüzden 'don gibi Her yerde göreceli yollar hakkında endişelenmeliyim.

Sorun, içe aktarılacak stilleri alamıyorum. stilleri göstermezler ama

@import "~styles/colors.less"; //not sure what the ~ does? 
@import "/styles/colors.less"; 
@import "styles/colors.less"; 
@import "../../styles/colors.less"; 

Ya derler ya ben dosya çözülememesi bir hata alıyorum: Ben de dahil olmak üzere google aramalara dayalı her hangi yol denedi.

Ayrıca bu takma adları kullanarak bunları çözmek için webpack almanın bir yolu var mı? Burada göreceli yolu anlamaya çalışmak istemiyorum, eğer bunu önleyebilirsem, çünkü yuvalarım derinleşecektir. Çalışmak için olsa gerekecekse yapacağım.

Bunu nasıl yaparım?

Answer 1

~node_modules klasöründen az dosyasını yüklemek için bir webpack less-loader kolaylığıdır. kontrol edin https://github.com/webpack-contrib/less-loader#imports