Ненужная фигурная скобка - PullRequest
Новая
       14

Ненужная фигурная скобка

0 голосов
/ 27 мая 2018

Я пытаюсь использовать postloader with webpack 4 следующим образом: 

   test: /\.s?[ac]ss$/,
    use: [
      {
        loader: "css-loader"
      },
      {
        loader: "postcss-loader"
      },
      {
        loader: "sass-loader",
        options: {
          sourceMap: true,
          includePaths: ["node_modules", "node_modules/@material/*"].map(
            d => path.join(__dirname, d)
          )
        }
      }
    ]
  },

Я должен включить node_modules, потому что https://github.com/material-components/material-components-web

Файл index.scss: 

@import "./Topbar/scss/topbar.scss";
@import "./Sidebar/scss/sidebar.scss";

body {
  margin: 0;
  padding: 0;
}

Компилятор жалуется: 

ERROR in ./src/index.scss
Module build failed: Syntax Error

(1:6) Unnecessary curly bracket

> 1 | body {
    |      ^
  2 |   margin: 0;
  3 |   padding: 0; }

Что я делаю не так?

Обновление
Я изменяю с test: /\.s?[ac]ss$/ на test: /\.scss$/, а содержание index.scss остается прежним: 

body {
  margin: 0;
  padding: 0;
}

Компилятор все еще жалуется: 

    ERROR in ./src/index.scss (./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js??ref--6-3!./src/index.scss)
    Module build failed: Syntax Error

    (1:6) Unnecessary curly bracket

    > 1 | body {
        |      ^
      2 |   margin: 0;
      3 |   padding: 0; }

ℹ ｢wdm｣: Failed to compile.

Обновление 2

Вот и вся конфигурация: 

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


module.exports = {
  entry: ["./src/index.js"],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.[hash].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: true
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: "css-loader"
          },
          /*{
            loader: "postcss-loader"
          },*/
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
              includePaths: ["node_modules", "node_modules/@material/*", "src"].map(
                d => path.join(__dirname, d)
              )
            }
          }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name][hash].[ext]",
              outputPath: "fonts/"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    }),
    new CopyWebpackPlugin([
      {
        from: "public"
      }
    ])
  ]
};
...