Webpack 3：为什么我得到：你可能需要一个合适的加载器来处理这种文件类型。？

Question

我正在尝试为我的 angularjs 应用创建一个 webpack 构建。我不断收到：

ERROR in ./client/app/app.scss
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "common/common";
| 
| .app {
 @ ./client/app/app.scss 4:14-37
 @ ./client/app/app.component.js
 @ ./client/app/app.js
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./client/app/app.js

这种类型的错误重复了几次...

我正在尝试使用 DLLreference 插件，这是我的应用程序。配置：

var path = require("path");
var webpack = require("webpack");

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, "build"),
    compress: true,
    port: 9000
  },
  node: {
    fs: 'empty'
  },
  cache: true,
  devtool: "eval", //or cheap-module-eval-source-map
  entry: {
    app: path.join(__dirname, "client/app", "app.js")
  },
  output: {
    path: path.join(__dirname, "build"),
    filename: "newapp.js",
    chunkFilename: "[name].js"
  },
  plugins: [
    //Typically you'd have plenty of other plugins here as well
    new webpack.DllReferencePlugin({
      context: path.join(__dirname, "client"),
      manifest: require("./build/vendor-manifest.json")
    }),
  ],
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: "babel-loader",
        include: [
          path.join(__dirname, "client") //important for performance!
        ],
        query: {
          cacheDirectory: true, //important for performance
          plugins: ["transform-regenerator"],
          presets: ["es2015", "stage-0"]
        }
      },
      { test: /\.(scss|sass)$/, loader: 'style-loader' },
      { test: /\.html$/, loader: 'raw-loader' },
      { test: /\.css$/, loader: 'css-loader' }
    ]
  },
  resolve: {
    extensions: [".js"]
  }
};

和我的 dll.config:

var path = require("path");
var webpack = require("webpack");

module.exports = {
  entry: {
    dependencies: ["angular","lodash","style-loader","sass-loader","fs","fs-walk","node-sass","css-loader"],
  },
  node: {
    fs: 'empty'
  },

  output: {
    filename: 'vendor.bundle.js',
    path: '/Users/dimitri/NG6-starter/build',
    library: 'vendor_lib',
  },
  plugins: [new webpack.DllPlugin({
    name: 'vendor_lib',
    path: 'build/vendor-manifest.json',
  })]
};

如何解决此类错误？

Answer 1

您目前仅指定 style-loader 用于加载 sass 文件。您需要包括 css-loader 和 sass-loader.

{
  test: /\.(scss|sass)$/,
  loader: ['style-loader', 'css-loader', 'sass-loader']
}

style-loader: creates style nodes from JS strings

css-loader: translates CSS into CommonJS

sass-loader: compiles Sass to CSS

注意：不要忘记使用 npm install --save sass-loader

安装 sass-loader

Webpack 3：为什么我得到：你可能需要一个合适的加载器来处理这种文件类型。？

Webpack 3: Why do I get :You may need an appropriate loader to handle this file type.?

angularjs

webpack

webpack-dev-server

webpack-2

webpack-3