Question

错误终端

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

错误控制台chrome

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

我在此行import 'semantic-ui-css/semantic.css';中发现了错误，所以我搜索了这种错误，我刚刚安装了url-loader并保留了同样的错误，这里是我的网络包配置

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

语义 - 意外的角色＆＃39; @＆＃39;与Webpack

1 个答案: