Webpack 2如何處理@import語句？

我一直在學習如何使用webpack設置reactjs項目。Webpack 2如何處理@import語句？

所以我試圖讓這個項目000-landing-page運行webpack配置。我想使用extract-text-webpack-plugin。

但在css文件中有導入語句;

@import "https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"; 
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css";

而且這些線路會導致錯誤

「意外字符@你可能需要一個適當的加載程序來處理此文件類型」

實際上例外是明確的，但我做不到找到合適的加載器我已經安裝了html，文件，url加載器並嘗試了一些配置，但無法完成。

這些都是我的CSS和SCSS裝載機

{ 
      test: /\.css$/, 
      include: [ path.resolve(__dirname, "/node_modules/")], 
      loader: ExtractTextPlugin.extract({ 
      fallbackLoader: 'style-loader', 
      loader: [ 
      'css-loader', 
      'postcss-loader', 
      ], 
      }) 
     }, 
     { 
      test: /\.scss$/, 
      include: [ path.resolve(__dirname, "/node_modules/")], 
      loader: ExtractTextPlugin.extract({ 
      fallbackLoader: 'style-loader', 
      loader: [ 
       'postcss-loader', 
       'sass-loader', 
      'css-loader', 
      ], 
      }), 
     }

來源

2016-11-27 Burak Karasoy

如果您刪除導入，它工作嗎？ – QoP

不，它表示意外的標記，您可能需要一個合適的加載器來處理這種文件類型（這次沒有@import）。你可以看看這裏的CSS文件.https：//github.com/fullstackreact/react-daily-ui/blob/master/003-landing-page/src/App.css –

當我刪除包括：[ path.resolve（__ dirname，「/ node_modules /」）]，它的工作原理。但導致錯誤的app.css不在節點模塊中，而是在src目錄中（單獨的文件夾）。這很奇怪 –

它有無關@symbol。由於擔任webpack的初學者，我錯過了一個小點。

如果不使用包括有：[]這意味着每一個文件都包含

如果事情是使用包括包括：文件X]這意味着除了包含文件X的任何文件。

，因爲我加入「包括：[path.resolve（__目錄名，」/ node_modules /「）]，」它只包括node_modules不是我的src文件夾。

來源

2016-12-04 18:55:49

我明白裝載機順序是從右到左。這將使加載器陣列的SCSS是：

['css-loader', 'postcss-loader', 'sass-loader']

這是因爲它本質上是一個組合功能，即

來源

2016-11-27 22:27:20 Skiing

Webpack 2如何處理@import語句？

回答

相關問題