2015-11-28 28 views
20

sass loader doc nói: "If you're just generating CSS without passing it to the css-loader, it must be relative to your web root". Vì vậy, tôi đã làm như nó nói, tôi có index.html của tôi trong project root của tôi, sau đó tôi đang cố gắng để tải một image từ tập tin scss của tôi. Bây giờ tôi có 2 lỗi: 1) từ Chrome's console: Cannot find module "./img/header.jpg". 2) từ terminal tôi:Webpack - bộ nạp sass không thể tìm thấy hình ảnh

ERROR in ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ./img/header.jpg in C:\Web-Development\React\Portfolio\public\css 
@ ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss 6:64-91 

webpack.config.js

module.exports = { 
    entry: './main.jsx', 
    output: { 
     filename: './public/js/build/bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel', 
       query: { 
        presets: ['react', 'es2015'] 
       } 
      }, 
      { 
       test: /\.scss$/, 
       loaders: ["style", "css", "sass", "resolve-url"] 
      }, 
      { 
      test: /\.jpg$/, 
      loader: "file?name=[path][name].[ext]" 
      } 
     ] 
    } 
}; 

Nếu tôi thấy mã của tôi, tôi có thể thấy rõ rằng css tôi sống bên <head> vì vậy tôi đã chỉ hình ảnh của tôi đường dẫn đến gốc của tôi, như tài liệu nói, nhưng vẫn không thể sửa chữa nó.

UPDATE: Tôi đã cài đặt file-loader và theo các hướng dẫn, bây giờ tôi nhận được lỗi này trong giao diện điều khiển: GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119

+0

Sự cố có thể xảy ra với thư mục bower_components? Tôi gặp sự cố tương tự ở đây với phông chữ: http://stackoverflow.com/questions/33733370/webpack-cannot-load-fonts-from-bower-using-css-scss – Zorgatone

Trả lời

0

Để giải quyết vấn đề này tôi đã tải lên webpack extremly basic configuration này để bắt đầu dự án của mình, tôi hy vọng nó có thể giúp mọi người gặp sự cố này. Gợi ý là tất cả chào đón tất nhiên.

6

Theo như tôi có thể nhìn thấy bạn đang thực sự sử dụng bộ nạp css ("style", "css", "sass", "resolve-url") (các "css" là "css-loader")

Trong (các) tệp sass của bạn, bạn nên liên kết đến hình ảnh bằng cách sử dụng đường dẫn tương đối từ tệp sass bạn đang chỉnh sửa.

styles 
- somefile.scss 
- another.scss 
images 
- someImage.jpg 

trong somefile.scss, bạn nên liên kết đến hình ảnh của bạn như thế này:

background-image: url("../images/someImage.jpg);

Do lưu ý, rằng nếu bạn muốn webpack để di chuyển những hình ảnh vào thư mục phân phối của bạn (nếu bạn là sử dụng một hệ thống như thế này) mà bạn sẽ cần một cái gì đó như file-loader để sao chép những tập tin trên.

+0

Tôi đã cố trỏ tệp scss của mình đến img thư mục của tôi làm url (../img/header.jpg) nhưng lần này tôi nhận được lỗi này: ERROR in ./public/img/header.jpg Phân tích cú pháp mô-đun không thành công: C: \ Web-Development \ React \ Portfolio \ public \ img \ header.jpg Dòng 1: Mã thông báo không mong muốn ILLEGAL Bạn có thể cần một trình tải thích hợp để xử lý loại tệp này. (Mã nguồn bị bỏ qua cho tệp nhị phân này) @ ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss 6:64 -92 –

+0

Đó là lý do tại sao bạn cần trình tải tệp. Cũng giống như cho các tệp scss của bạn, bạn cần phải chỉ định một thử nghiệm và bộ nạp (trong trường hợp này là bộ tải tệp) –

+0

Ok, tôi đã thêm '{test: /\.jpg$/, bộ nạp:" file? Name = [ path] [name]. [ext] "}' trong webpack.config.js của tôi nhưng bây giờ trong giao diện điều khiển của Chrome tôi gặp lỗi khác: 'GET http: // localhost: 3000/public/img/header.jpg 404 (Không Đã tìm thấy) - jquery.js: 9119'. Tôi xin lỗi vì tất cả những câu hỏi này, tôi mới bắt đầu trong những ngày này để sử dụng tất cả các công cụ này –

1

Bạn có thể sử dụng ignore-loader nếu hình ảnh của bạn đã ở nơi bạn cần đến. Trình tải tệp sẽ sao chép các tệp vào thư mục đầu ra của bạn.

Các vấn đề liên quan