Webpack 2 sass-loader 意外字符'@'答案

【问题标题】：Webpack 2 sass-loader Unexpected character '@'Webpack 2 sass-loader 意外字符'@'
【发布时间】：2023-03-26 17:25:01
【问题描述】：

我有下一个 webpack 2 规则配置，运行时 webpack 抛出下一个错误：

Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @media screen and (min-width: 40em) {
|   .feature {
|     margin-bottom: 8.75rem;
 @ ./~/style-loader?{"camelCase":true,"localIdentName":"[name]_[local]_[hash:base64:3]","modules":true}!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?{"sourceMap":true,"outputStyle":"expanded","include":["/opt/inmoblex/current/inmoblex/cfg/src/styles","node_modules"]}!./src/components/LandingFeature/styles.scss 4:14-310

¿怎么了？

感谢帮助

rules: [
  {
    test: /\.css$/,
    use: [
      { loader: 'isomorphic-style-loader' },
      { loader: 'css-loader' },
      { loader: 'postcss-loader' },
    ]
  },
  {
    test: /\.scss/,
    use: [
      { loader: 'isomorphic-style-loader' },
      {
        loader: 'style-loader',
        options: {
          camelCase: true,
          localIdentName: '[name]_[local]_[hash:base64:3]',
          modules: true
        }
      },
      { loader: 'postcss-loader' },
      { loader: 'resolve-url-loader' },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: true,
          outputStyle: 'expanded',
          include: [
            path.resolve(__dirname, "./src/styles"),
            "node_modules",
          ],
        }
      },
    ]
  },
  {
    test: /\.json/,
    use: [
      { loader: 'json-loader' },
    ]
  },
  {
    test: /\.(png|jpg|gif|woff|woff2)$/,
    use: [{
      loader: 'url-loader',
    }]
  },
  {
    test: /\.(mp4|ogg|svg)$/,
    use: [{
      loader: 'file-loader',
    }]
  },
],

【问题讨论】：

标签： webpack webpack-2 webpack-style-loader sass-loader isomorphic-style-loader

【解决方案1】：

在使用sass-loader、resolve-url-loader 和postcss-loader 处理.scss 之后，您正在使用style-loader。这样做的结果仍然是 CSS，所以应该有一个 css-loader 将其转换为 JavaScript。因为您使用的是isomorphic-style-loader，所以您不需要style-loader，从您传递给它的选项来看，看起来应该是css-loader。所以将style-loader重命名为css-loader：

{
  test: /\.scss/,
  use: [
    { loader: 'isomorphic-style-loader' },
    {
      loader: 'css-loader',
      options: {
        camelCase: true,
        localIdentName: '[name]_[local]_[hash:base64:3]',
        modules: true
      }
    },
    { loader: 'postcss-loader' },
    { loader: 'resolve-url-loader' },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
        outputStyle: 'expanded',
        include: [
          path.resolve(__dirname, "./src/styles"),
          "node_modules",
        ],
      }
    },
  ]
},

【讨论】：