語義 - 意外的字符 '@' 用的WebPack

Question

錯誤終端

ERROR in ./~/semantic-ui-css/semantic.css 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected character '@' (11:0) 

錯誤控制檯鉻

Uncaught Error: Cannot find module "semantic-ui-css/semantic.css" 

，我發現它的錯誤在這行import 'semantic-ui-css/semantic.css';，所以我搜索這種錯誤，我剛剛安裝了url-loader並保持相同的錯誤，這裏是我的webpack配置

module: { 
     loaders: [ 
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, 
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }, 
      { 
       test: /\.(png|woff|woff2|eot|ttf|svg)$/,  <--- this delete a lot of errors with semantic, but wont work with "Unexpected character '@'" 
       loader: 'url-loader?limit=100000' 
      }, 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'eslint-loader' 
      }, 
      { 
       test: /\.css$/, 
       loaders: [ 
        'style-loader?sourceMap', 
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' 
       ], 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.scss$/, 
       loaders: [ 
        'style-loader', 
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]', 
        'resolve-url-loader', 
        'sass-loader' 
       ], 
       exclude: /node_modules/ 
      } 
     ] 
    } 

所以，我該如何解決這個問題？我認爲這是我不明白的是，也許是因爲它dosnt有import (this section) from 'semantic-ui-css/semantic.css';

Answer 1

改變這個東西有import 'semantic-ui-css/semantic.css';的東西：

{ 
    test: /\.css$/, 
    loaders: [ 'style-loader?sourceMap', 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ], 
    exclude: /node_modules/ 
}, 

這樣：

{ 
    test: /\.css$/, 
    loaders: [ 'style-loader?sourceMap', 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ] 
} 

換句話說.. 。刪除exclude。

另一種選擇是如上所述不改變......你可能不想承擔所有node_modules CSS模塊。我覺得這種方式比較好......所以，不是增加一個額外的規則：

{ 
    test: /\.css$/, 
    include: path.resolve('node_modules'), 
    use: [ 
    { 
     loader: 'style-loader', 
     options: { 
     sourceMap: true 
     } 
    }, { 
     loader: 'css-loader', 
     options: { 
     sourceMap: true 
     } 
    } 
    }] 
}`