cách nhập tệp LESS từ đường dẫn cụ thể bằng cách sử dụng trình tải ít webpack?

Question

Tôi đang đặt một dự án phản ứng với nhau bằng cách sử dụng webpack và LESS để tạo kiểu. Tôi đang sử dụng cấu trúc kiểu thành phần như sau:

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

Tôi muốn mỗi thành phần để tham khảo đó là phong cách riêng thông qua một nhập khẩu:

//MyComponent.js 

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

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

Trong index.less Tôi muốn nhập khẩu các kiểu được chia sẻ chung . Một cái gì đó như:

//index.less 

@import "styles/colors.js"; 

.someclass { 
    background: @themecolor; 
} 

Dưới đây là làm thế nào tôi có các tập tin webpack.config thiết lập cho ít:

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

... 

Như bạn có thể thấy tôi làm cho sử dụng rộng rãi năng quyết bí danh Webpack, vì vậy tôi don' t phải lo lắng về đường dẫn tương đối khắp nơi.

Vấn đề là tôi không thể lấy kiểu nhập. Tôi đã thử mọi cách dựa trên các tìm kiếm của google bao gồm:

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

Hoặc là biên dịch nhưng kiểu không hiển thị hoặc tôi gặp lỗi khi không thể giải quyết tệp.

Có cách nào để có webpack để giải quyết các bí danh này bằng cách sử dụng bí danh không? Tôi thực sự không muốn phải tìm ra con đường tương đối ở đây, nếu tôi có thể tránh được nó, bởi vì cái lồng của tôi sẽ trở nên khá sâu. Tôi sẽ nếu tôi phải mặc dù, để có được nó để làm việc.

Làm cách nào để thực hiện việc này?

Answer 1

~ là webpack less-loader tiện lợi để tải ít tệp hơn từ thư mục node_modules. kiểm tra https://github.com/webpack-contrib/less-loader#imports