jak zaimportować pliki LESS z określonej ścieżki za pomocą less-loader?

Question

Umieszczę projekt reakcji razem za pomocą pakietu internetowego i LESS do stylizacji. Używam struktura styl komponent tak:

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

chcę każdy komponent odwołać swoje własne style poprzez import:

//MyComponent.js 

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

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

Within index.less Chcę importować wspólne wspólne style . Coś jak:

//index.less 

@import "styles/colors.js"; 

.someclass { 
    background: @themecolor; 
} 

Oto jak mam pliki webpack.config utworzonych za mniej:

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

... 

Jak widać mam szerokie wykorzystanie funkcji resolve alias WebPACK, więc ja don” Trzeba martwić się względnymi ścieżkami w każdym miejscu.

Problem polega na tym, że nie mogę uzyskać stylów do zaimportowania. Próbowałem wszystkie strony na podstawie wyszukiwań Google w tym:

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

Albo kompiluje ale style nie pokazują, albo pojawia się błąd, że plik nie może zostać rozwiązany.

Czy istnieje sposób, aby uzyskać pakiet sieci Web do rozwiązania tych przy użyciu aliasów również? Naprawdę nie chcę musieć wymyślać względnej ścieżki tutaj, jeśli mogę tego uniknąć, ponieważ moje zagnieżdżenie dostanie się dość głęboko. Będę jednak, jeśli będę musiał, aby to zadziałało.

Jak to zrobić?

Answer 1

~ to wygoda w ładowaniu WWW z mniejszą ilością pliku z katalogu . sprawdź https://github.com/webpack-contrib/less-loader#imports