webpackwebpack-2webpack-style-loadersass-loaderisomorphic-style-loader

Webpack 2 sass-loader Unexpected character '@'


i have the next webpack 2 rules configuration when run webpack throwed the next error:

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

¿what are wrong?

:)

thanks for help

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

Solution

  • You're using style-loader after the .scss has been processed with sass-loader, resolve-url-loader and postcss-loader. The result of this is still CSS, so there should be a css-loader that transforms it to JavaScript. Because you're using isomorphic-style-loader you won't need the style-loader and from the options you passed to it, it looks like that should have been the css-loader. So rename style-loader to 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",
            ],
          }
        },
      ]
    },