come importare file LESS da un percorso specifico usando webpack less-loader?

Question

Sto mettendo insieme un progetto di reazione usando webpack e LESS per lo styling. Sto utilizzando la struttura di stile componente in questo modo:

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

Voglio ogni componente di riferimento è proprio stile attraverso un'importazione:

//MyComponent.js 

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

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

Entro index.less voglio importare gli stili condivisi comuni . Qualcosa di simile:

//index.less 

@import "styles/colors.js"; 

.someclass { 
    background: @themecolor; 
} 

Ecco come ho i file webpack.config costituite da meno:

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

... 

Come potete vedere faccio ampio uso di funzionalità di determinazione alias di Webpack, così ho don' Devo preoccuparci dei percorsi relativi dappertutto.

Il problema è che non riesco a ottenere gli stili da importare. Ho provato in tutti i modi sulla base di ricerche di Google, tra cui:

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

O si compila, ma gli stili non mostrano, o io ottenere un errore che il file non può essere risolto.

C'è un modo per ottenere il webpack per risolvere anche questi usando alias? Non voglio davvero capire il percorso relativo qui, se posso evitarlo, perché il mio nidificazione diventerà piuttosto profondo. Lo farò se devo, però, per farlo funzionare.

Come posso fare?

Answer 1

~ è un pacchetto Web less-loader comodo per caricare meno file dalla cartella node_modules. check https://github.com/webpack-contrib/less-loader#imports