Làm cách nào để nhập SCSS của Foundation bằng Webpack 2?

Question

Tôi đang cố gắng sử dụng Foundation với Webpack 2 bằng trình tải bộ nạp.

tôi nhập khẩu Foundation với

@import 'foundation-sites/scss/foundation'; 

Và nhận được một lỗi nhập khẩu vì nó không thể tìm thấy nền tảng. Đọc tài liệu về trình tải sass cho thấy tôi thực sự nên sử dụng:

@import '~foundation-sites/scss/foundation'; 

Sửa lỗi nhập nhưng tạo sự cố mới.

Các lỗi tôi nhận được là

ModuleBuildError trong Mô-đun xây dựng thất bại: @import "bình thường hóa"; ^ File to Import không tìm thấy hoặc đọc được: bình thường hóa

File to Import không tìm thấy hoặc đọc được: bình thường hóa phong cách Chánh tờ: ... /node_modules/foundation-sites/scss/foundation.scss trong ... /node_modules/foundation-sites/scss/foundation.scss (dòng 9, cột 1)

Trong file webpack cấu hình của tôi, tôi cũng đang sử dụng ExtractTextPlugin như sau:

module: { 
    rules: [ 
     { 
       test: /\.(scss|css)$/, 
       loader: ExtractTextPlugin.extract({ 
       fallbackLoader: 'style-loader', 
       loader: [ 
        { 
         loader: 'css-loader' 
        }, 
        { 
         loader: 'sass-loader', 
         query: { 
          includePaths: [path.resolve(__dirname, "./node_modules")] 
         } 
        } 
       ] 
      }) 
     } 
    ] 
}, 
resolve: { 
    modules: ['node_modules'] 
} 

tôi tin rằng điều này xuất phát từ webpack không giải quyết được node_modules folde r vì lý do nào đó nhưng không chắc chắn nguyên nhân xuất phát từ đâu.

Answer 1

Hãy thử điều này, vì đó là điều duy nhất làm việc cho tôi.

new webpack.LoaderOptionsPlugin({ 
    options: { 
     context: '/', // <- putting this line right under "options" did the trick 
     sassLoader: { 
      includePaths: [ 
       path.resolve(__dirname, 'vendor/zurb/foundation/scss'), 
      ] 
     } 
    } 
})