Ví dụ về cách tải các tệp CSS tĩnh từ node_modules bằng cách sử dụng webpack?

Question

Tôi không biết làm thế nào để tải với webpack bất kỳ CSS từ node_modules libs, ví dụ tôi đã cài đặt tờ rơi và mỗi lần tải leaflet/dist/leaflet.css không thành công.

Bạn có thể cung cấp ví dụ về cách tải kiểu tĩnh từ node_modules không?

Cấu hình gói webpack hiện tại của tôi bên dưới. Additionaly Tôi đang sử dụng extract-text-webpack-plugin và sass-loader các tệp scss dự án của tôi đang hoạt động tốt, tôi cũng có css-loader, tôi có phải giải quyết các tệp css tĩnh hoặc thêm một cái gì đó vào stylePathResolves không?

//require('leaflet/dist/leaflet.css'); 

var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var webpack = require("webpack"); 
var path = require('path'); 

var stylePathResolves = (
    'includePaths[]=' + path.resolve('./') + '&' + 
    'includePaths[]=' + path.resolve('./node_modules') 
) 

module.exports = { 
    entry: ".js/app.js", 
    output: { 
    path: "./static/js", 
    filename: "app.js" 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel' 
     }, { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract(
      'style', 
      'css' + '!sass?outputStyle=expanded&' + stylePathResolves 
     ) 
     } 
    ] 
    }, 
    plugins: [new ExtractTextPlugin("app.css")] 
}; 

Nơi để tải leaflet.css, nhận xét ra require('leaflet/dist/leaflet.css') mang lại cho tôi lỗi sau:

home/myproj/node_modules/leaflet/dist/leaflet.css:3 
.leaflet-map-pane, 
^ 

SyntaxError: Unexpected token . 

Answer 1

Đối với người dùng đã gặp phải một vấn đề tương tự, có những bước mà tôi đã thực hiện để làm cho nó làm việc , Tôi không chắc chắn rằng cách cân bằng này.

1. npm install file-loader --save
2. thêm import 'leaflet/dist/leaflet.css'; trong app.js chính
3. webpack.config.js thay đổi bằng cách làm theo cách:

thêm css-loader để thoát khỏi SyntaxError: Unexpected token . và tiếp theo thêm file-loader và kết hợp các file để loại bỏ Uncaught Error: Cannot find module "./images/layers.png":

module.exports = { 
    entry: "./web/static/js/app.js", 
    output: { 
    path: "./priv/static/js", 
    filename: "app.js" 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel' 
    }, { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract(
     'style', 
     'css' + '!sass?outputStyle=expanded&' + stylePathResolves 
    ) 
    }, { 
     test: /\.css$/, 
     loader: "style-loader!css-loader" 
    }, { 
     test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, 
     loader: 'file-loader' 
    }] 
    }, 
    plugins: [new ExtractTextPlugin("app.css")] 
}; 

Lúc đầu tôi lấy cấu hình này từ một số ví dụ và không rõ 100% lý do tại sao tôi đã sử dụng ExtractTextPlugin để tải scss và tương quan với css-loader, có lẽ tôi nên sử dụng ExtractTextPlugin hơn trong phần này , có thể ai đó biết và có thể viết mã? Nhưng giải pháp của tôi đang hoạt động và tôi có thể làm việc thêm.