- 予期しない文字 '@' の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/ 
      } 
     ] 
    } 

私はこの問題をどのように修正する必要がありますか？これに

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

：私は、それがこのimport (this section) from 'semantic-ui-css/semantic.css';

Answer 1

変更していdosnt多分ので、私はまだそれを得るいけない何かを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を削除します。

もう1つのオプションは、上記のように変更しないことです...そして、おそらく、すべてのnode_modulesのCSSモジュールを想定したくないでしょう。私はこの方法がより良いと思う...代わりに、追加ルールを追加する：

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