加载CSS时，We​​bpack会引发错误“意外令牌”

Question

我尝试将预建的semantic.css导入到条目文件index.js中，webpack报告：

ERROR in ../semantic/dist/semantic.css
Module parse failed: /home/khoa/projects/mystack/test/semantic/dist/semantic.css Unexpected character '@' (11:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (11:0)

所以我猜我错过了一些加载css @import url语句的加载器。 我用谷歌搜索了几个小时，尝试了各种装载机，并没有完成这个技巧。 之后，我注意到无论我放在css文件的loader-field中，结果都是一样的。 （甚至一些带有任何扩展的东西也可以用原始加载器工作。）

{
  test: /\.css$/,
  include: path.resolve(__dirname, '../semantic/dist'),
  loader: 'style!css!postcss' // whatever I put here doesn't matter
},

我尝试重新启动计算机并重新安装所有模块，但没有任何改变。 所以我猜问题是webpack。

Answer 1

如果你在Windows上，你必须努力使路径发挥作用。

const path = require("path");
const srcPath = path.join(__dirname, 'src');

我建议您检查ExtractTextPlugin（https://github.com/webpack/extract-text-webpack-plugin）。

添加加载程序的路径：

loaders: [
      {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}
      }
    ]

此外，你必须添加你的加载器的路径，我更喜欢在常量中，但这也应该工作。

   {
      test: /\.css$/,
      include: path.resolve(__dirname, '../semantic/dist'),
      loader: 'style!css!postcss&includePaths[]=' + path.resolve(__dirname, "./src")
    },

同时添加解决方案：

resolve: {
    extensions: ["", ".js", ".css"],
    modulesDirectories: ["src", "node_modules"],
    root: [__dirname + path.sep + 'scripts'],
  }