वेबपैक कम-लोडर का उपयोग करके विशिष्ट पथ से कम फ़ाइलों को कैसे आयात करें?

Question

मैं स्टाइल के लिए वेबपैक और कम से कम एक प्रतिक्रिया परियोजना डाल रहा हूं। मैं तो जैसे घटक शैली संरचना का उपयोग कर रहा:

/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"; 

या तो यह संकलित लेकिन शैलियों नहीं दिखाते हैं, या मैं एक त्रुटि है कि फाइल हल नहीं किया जा सकता है।

क्या एलियास का उपयोग करके इन्हें हल करने के लिए वेबपैक प्राप्त करने का कोई तरीका है? मैं वास्तव में यहां सापेक्ष पथ को समझना नहीं चाहता हूं, अगर मैं इससे बच सकता हूं, क्योंकि मेरा घोंसला काफी गहरा हो जाएगा। अगर मुझे काम करना है, तो मुझे यह करना होगा।

मैं यह कैसे कर सकता हूं?

Answer 1

~node_modules फ़ोल्डर से कम फ़ाइल लोड करने के लिए एक वेबपैक less-loader सुविधा है। https://github.com/webpack-contrib/less-loader#imports

देखें