Webpack 加载 CSS 时抛出错误 "Unexpected token"

Question

我尝试将预构建的 semantic.css 导入入口文件 index.js，webpack 报告:

ERROR in ../semantic/dist/semantic.cssModule 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)

So I guessed I missed some loader to load css @import url statement.I googled many hours, tried various loaders and just not done the trick.Afterward, I noticed that whatever I put in loader-field of css file, the results are the same. (And even some stuff with any extension work fine with raw loader.)

{
  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'],
  }