Wie importiert man LESS-Dateien aus einem bestimmten Pfad mit dem webpack less-loader?

Question

Ich stelle ein reaktives Projekt mit webpack und LESS für das Styling zusammen. Ich bin mit der Komponente Stil Struktur wie folgt:

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

ich jede Komponente will seine eigene Stile über einen Import verweisen:

//MyComponent.js 

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

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

Innerhalb index.less ich die gemeinsam genutzten Arten importieren möchten . Etwas wie:

//index.less 

@import "styles/colors.js"; 

.someclass { 
    background: @themecolor; 
} 

Hier ist, wie ich die webpack.config Dateien für aufgebaut haben weniger:

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

... 

Wie Sie sehen, ich ausgiebig Gebrauch von Webpack alias Entschlossenheit Feature machen, so dass ich don‘ Ich muss mich um relative Pfade überall sorgen.

Das Problem ist, ich kann nicht die Stile zu importieren. Ich habe versucht, einschließlich in alle Richtungen, basierend auf Google-Suchanfrage:

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

Entweder es kompiliert, aber die Stile nicht zeigen, oder ich erhalte eine Fehlermeldung, dass die Datei nicht aufgelöst werden kann.

Gibt es eine Möglichkeit, Webpack diese Aliase zu lösen auch zu lösen? Ich möchte wirklich nicht den relativen Weg hier herausfinden müssen, wenn ich es vermeiden kann, weil meine Verschachtelung ziemlich tief werden wird. Ich werde, wenn ich muss, um es zur Arbeit zu bringen.

Wie mache ich das?

Answer 1

~ ist ein Webpack less-loader Bequemlichkeit zum Laden weniger Datei von node_modules Ordner. Überprüfen Sie https://github.com/webpack-contrib/less-loader#imports