语义-- 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/
            }
        ]
    }

那么，我该如何解决这个问题呢？我认为这是import 'semantic-ui-css/semantic.css';的一些东西，但我还没有得到它，也许是因为它没有import (this section) from 'semantic-ui-css/semantic.css';

Answer 1

改变这一点：

{ 
  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
      }
    }
  }]
}`