Question

设置Webpack的新功能。试图建立一个非常简单的html / css / js网站，没有任何反应或其他js框架。我正在尝试立即添加scss并继续出现此错误。

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'style-loader' in '/Users/brian/Documents/Hiromi/6_WebFiles'
 @ ./src/main.js 1:0-32
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js

这是我的webpack配置：

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.scss$/,
        use: 
        [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "sass-loader",
          options: {
            includePaths: ["./src/*"]
          }
        }]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

我要做的只是让webpack将./src/main.scss文件编译为./dist/main.css文件。

尝试了很多东西，但不确定如何实现。任何提示都将是惊人的！

谢谢！

Answer 1

对于要使用Webpack的每个装载程序，都必须通过npm或yarn下载它，以便Webpack可以在node_modules目录中找到它。

因此，您将需要通过npm安装style-loader，还需要安装sass-loader，css-loader，html-loader和babel-loader。

babel-loader反过来也需要运行babel-core，因此您也需要安装它。

您可以通过运行以下操作来实现：

npm install --save style-loader sass-loader css-loader html-loader babel-loader babel-core

如果您已经安装了这些模块中的任何一个，npm将忽略它，因此整个字符串应该可以安全运行

Scss / Sass Webpack /项目设置不起作用

1 个答案: