Sass error expected

Содержание

1. SASS Expected identifier: Does Not accept number and letters in same map key? #2956
2. Comments
3. SyntaxError: Unexpected identifier #55
4. Comments
5. Preconditions
6. Given
7. Finally
8. Footer
9. Uncaught SyntaxError: Unexpected identifier — что это означает?
10. Что делать с ошибкой Uncaught SyntaxError: Unexpected identifier
11. Попробуйте сами
12. SyntaxError: Unexpected identifier #55
13. Comments
14. Preconditions
15. Given
16. Finally
17. Footer
18. treeShake option gives SassError: Expected identifier #439
19. Comments

1. you are using jspm@0.17.0-beta.12 which is not released. It is still a beta and has bugs. Especially for plugins. Please use the latest stable version.
2. you are importing wrong. Instead of import ‘./check-box-alpha.scss’; you have to do a import ‘./check-box-alpha.scss!’;
3. you are using TypeScript. Please look at

1. you are using jspm@0.17.0-beta.12 which is not released. It is still a beta and has bugs. Especially for plugins. Please use the latest stable version.
2. you are importing wrong. Instead of import ‘./check-box-alpha.scss’; you have to do a import ‘./check-box-alpha.scss!’;
3. you are using TypeScript. Please look at

use: sass-loader css-loader style-loader

package.json:

{
«css-loader»: «^3.6.0»,
«sass»: «^1.26.10»,
«sass-loader»: «^9.0.2»,
«style-loader»: «^1.2.1»
}

It looks like you just deleted our lovely crafted issue template. It was there for good reasons. Please help us solving your issue by answering the questions asked in this template. I’m closing this. Please either update the issue with the template and reopen, or open a new issue.

I belive this is a legitimate issue and one without a work-around.

See my investigation on the ngx-markdown issue tracker. jfcere/ngx-markdown#252 (comment)

In my case, it surfaced with useages of sass modules being completely rejected after an upgrade of packages to support Angular v10, one of which started depending on node-sass.

@evilebottnawi I can open another issue if you want the full issue template filled out.

@robjtede You have invalid configuration css-loader twice applied

If that’s the underlying problem with this issue then my case is different. There’s definitely not two instances of css-loader.

ERROR in .../libs/.../src/index.scss (
     .../node_modules/css-loader/dist/cjs.js??ref--14-1
    !.../node_modules/postcss-loader/src??embedded
    !.../node_modules/resolve-url-loader??ref--14-3
    !.../node_modules/sass-loader/dist/cjs.js??ref--14-4
    !.../libs/.../src/index.scss
)

Module build failed (from .../node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "  @include badge": expected "}", was ".load-host;"
        on line 4 of libs/.../src/lib/badge/badge.scss
        from line 1 of .../libs/.../src/index.scss
>>   @include badge.load-host;

SassError: Invalid CSS after » @include badge»: expected «}», was «.load-host;»

It is sass error, we can’t fix problems with your code, sorry

This is valid sass, supported by dart-sass as described in the comment I linked. I see this is not the right place to discuss the issue, sorry for the bother.

@robjtede node-sass and dart-sass have incompatibility with some syntaxes

I understand, but the fact is that if node-sass appears in the dependency tree, it is preferred over dart-sass. The error is thrown because node-sass is being used and doesn’t support sass modules.

Created a minimal reproduction repo: https://github.com/robjtede/repro-sass-loading

If you have problem with angular-cli, please open an issue in angular-cli repo

Yep, problem on angular-cli side

            {
                test: /.s(a|c)ss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ],
            },
            {
                test: /.(jpe?g|gif|png|svg)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    name: "[hash:10].[ext]",
                }
            },
            {
                exclude: /.(s?(a?|c)ss|js|html)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                }
            }

exculde «css» or «scss» at file-loader

and its worked for me

file-loader 、css-loader was conflicted perhaps

@planAplan are you using storybook with Angular ?
I’ve tried your solution but it’s not working for me
here is my main.js file:

module.exports = {
    webpackFinal: async (config, { configType }) => {
    config.module.rules.push(
      {
        test: /.s(a|c)ss$/,
        use: ['style-loader', 'sass-loader', 'css-loader']
      },
      {
        test: /.(jpe?g|gif|png|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]'
        }
      },
      {
        exclude: /.(s?(a?|c)ss|js|html)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    );

    // Return the altered config
    return config;
    },
    stories: ['../src/**/*.stories.mdx', '../src/**/*[email protected](js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials']
};

and my preview.js file:

import { setCompodocJson } from '@storybook/addon-docs/angular';
import docJson from '../documentation.json';
import '@angular/localize/init';
setCompodocJson(docJson);

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' }
};

@planAplan are you using storybook with Angular ?
I’ve tried your solution but it’s not working for me
here is my main.js file:

module.exports = {
    webpackFinal: async (config, { configType }) => {
    config.module.rules.push(
      {
        test: /.s(a|c)ss$/,
        use: ['style-loader', 'sass-loader', 'css-loader']
      },
      {
        test: /.(jpe?g|gif|png|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]'
        }
      },
      {
        exclude: /.(s?(a?|c)ss|js|html)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    );

    // Return the altered config
    return config;
    },
    stories: ['../src/**/*.stories.mdx', '../src/**/*[email protected](js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials']
};

and my preview.js file:

import { setCompodocJson } from '@storybook/addon-docs/angular';
import docJson from '../documentation.json';
import '@angular/localize/init';
setCompodocJson(docJson);

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' }
};

i`ve never used storybook with Angular
but
Maybe it’s a problem with the order of loader parsing. You can try this

{
  test: /.s(a|c)ss$/,
  use: ['style-loader', 'css-loader', 'sass-loader' ]
}

I hope it helps you 🙏

If anyone lands here from webpacker 6 / rails, your issue might be that you are including css-loader in your custom webpacker configs. It is included already by webpacker, I believe.

Edit: I actually ended up opting out of the webpacker scss config entirely by adding this into base.js:

const scssConfigIndex = webpackConfig.module.rules.findIndex((config) => ".scss".match(config.test))
webpackConfig.module.rules.splice(scssConfigIndex, 1)

Not sure why this has been closed? There is no solution to the issue. I am also running into this.

Apparently I have fixed this by just setting this order to my style loaders, as the documentation

Apparently I have fixed this by just setting this order to my style loaders, as the documentation

Yes — the order is a priority when dealing with loaders.
I’d consider this an answer to the question.

I’ve had same problem , first of all I’ve updated storybook webpack version to 5 , then I replaced styles ryles which was used by storybook webpack config , to rules , I use in my webpack config , belowe you can see my .storybook/main.js file

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const rules = require('../webpack/rules');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*[email protected](js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-scss',
  ],
  core: {
    builder: 'webpack5',
  },
  webpackFinal: async (config) => {
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, '../src/client'),
    ];

    config.module.rules.push(rules.css());

    config.plugins.push(new MiniCssExtractPlugin());

    const newRules = config.module.rules.filter(
      (entity) =>
        ![/.css$/, /.s[ca]ss$/].some(
          (regExp) => regExp.toString() === entity.test.toString()
        )
    );

    return {
      ...config,
      module: {
        ...config.module,
        rules: newRules,
      },
    };
  },
};

webpack/rules.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const css = () => {
  return {
    test: /.scss$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          modules: true,
        },
      },
      {
        loader: 'sass-loader',
      },
    ],
  };
};

i had the same error, i added .scss to the css file on my laravel webpack.mix.js

mix.sass(‘resources/ui/frontend/css/frontend.scss‘, ‘public/assets/frontend/css’);

I am using webpack5, and encounter the same problem, the error caused by the false module’s rules, as follows:

The regular expression for css files should be /.css/i, haha.

I got this error, when I apply loaders to the same files twice.

// webpack.config.js with error
{
//...
  module: {
    rules: [
      {
        test: /.(scss|css)$/,
        use: ...
      },
      {
        test: /.module.(scss|css)$/,
        use: ...
      },
    ]
  }
}

// webpack.config.js without error
{
//...
  module: {
    rules: [
      {
        oneOf: [ // <---
          {
            test: /.(scss|css)$/,
            use: ...
          },
          {
            test: /.module.(scss|css)$/,
            use: ...
          },
        ]
      }
    ]
  }
}

I finally got storybook 6.5.9 and react 18.x to work.
I had to use a combination of most of the suggestions above…

Below is my .storybook/main.js

const path = require('path');

const alias = {
  'my-kit': path.resolve(__dirname, '../src'),
};

module.exports = {
  stories: [
    './stories/**/*.stories.mdx',
    './stories/**/*[email protected](js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/preset-create-react-app',
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
  webpackFinal: async (config) => {
    const scssConfigIndex = config.module.rules.findIndex((c) =>
      '.scss'.match(c.test),
    );
    if (scssConfigIndex > 0 && config.module.rules[scssConfigIndex]?.oneOf)
      config.module.rules[scssConfigIndex].oneOf.push({
        test: /.(css|s(a|c)ss)$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../'),
      });
    else
      config.module.rules.push({
        test: /.(css|s(a|c)ss)$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../'),
      });
    return {
      ...config,
      resolve: { ...config.resolve, alias },
    };
  },
};

I need to do some more work on the logic… But in my case I had to add the «loaders» into the oneOf rules that contained scss rules. Thank you @snowinmars for your work above.

ERROR Failed to compile with 1 error 12:40:40

error in ./src/assets/style.scss

Syntax Error: SassError: expected «}».
╷
301 │ }
│ ^
╵
src/assets/style.scss 301:2 root stylesheet

@ ./src/assets/style.scss 4:14-225 15:3-20:5 16:22-233
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.0.28:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Пригласить эксперта

$color: blue;

h1 {
  color: $color;
}

$color: blue
h1
  color: $color

• 
  Показать ещё
  Загружается…
  

use: sass-loader css-loader style-loader

package.json:

{
«css-loader»: «^3.6.0»,
«sass»: «^1.26.10»,
«sass-loader»: «^9.0.2»,
«style-loader»: «^1.2.1»
}

It looks like you just deleted our lovely crafted issue template. It was there for good reasons. Please help us solving your issue by answering the questions asked in this template. I’m closing this. Please either update the issue with the template and reopen, or open a new issue.

I belive this is a legitimate issue and one without a work-around.

See my investigation on the ngx-markdown issue tracker. jfcere/ngx-markdown#252 (comment)

In my case, it surfaced with useages of sass modules being completely rejected after an upgrade of packages to support Angular v10, one of which started depending on node-sass.

@evilebottnawi I can open another issue if you want the full issue template filled out.

@robjtede You have invalid configuration css-loader twice applied

If that’s the underlying problem with this issue then my case is different. There’s definitely not two instances of css-loader.

ERROR in .../libs/.../src/index.scss (
     .../node_modules/css-loader/dist/cjs.js??ref--14-1
    !.../node_modules/postcss-loader/src??embedded
    !.../node_modules/resolve-url-loader??ref--14-3
    !.../node_modules/sass-loader/dist/cjs.js??ref--14-4
    !.../libs/.../src/index.scss
)

Module build failed (from .../node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "  @include badge": expected "}", was ".load-host;"
        on line 4 of libs/.../src/lib/badge/badge.scss
        from line 1 of .../libs/.../src/index.scss
>>   @include badge.load-host;

SassError: Invalid CSS after » @include badge»: expected «}», was «.load-host;»

It is sass error, we can’t fix problems with your code, sorry

This is valid sass, supported by dart-sass as described in the comment I linked. I see this is not the right place to discuss the issue, sorry for the bother.

@robjtede node-sass and dart-sass have incompatibility with some syntaxes

I understand, but the fact is that if node-sass appears in the dependency tree, it is preferred over dart-sass. The error is thrown because node-sass is being used and doesn’t support sass modules.

Created a minimal reproduction repo: https://github.com/robjtede/repro-sass-loading

If you have problem with angular-cli, please open an issue in angular-cli repo

Yep, problem on angular-cli side

            {
                test: /.s(a|c)ss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ],
            },
            {
                test: /.(jpe?g|gif|png|svg)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    name: "[hash:10].[ext]",
                }
            },
            {
                exclude: /.(s?(a?|c)ss|js|html)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                }
            }

exculde «css» or «scss» at file-loader

and its worked for me

file-loader 、css-loader was conflicted perhaps

@planAplan are you using storybook with Angular ?
I’ve tried your solution but it’s not working for me
here is my main.js file:

module.exports = {
    webpackFinal: async (config, { configType }) => {
    config.module.rules.push(
      {
        test: /.s(a|c)ss$/,
        use: ['style-loader', 'sass-loader', 'css-loader']
      },
      {
        test: /.(jpe?g|gif|png|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]'
        }
      },
      {
        exclude: /.(s?(a?|c)ss|js|html)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    );

    // Return the altered config
    return config;
    },
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials']
};

and my preview.js file:

import { setCompodocJson } from '@storybook/addon-docs/angular';
import docJson from '../documentation.json';
import '@angular/localize/init';
setCompodocJson(docJson);

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' }
};

@planAplan are you using storybook with Angular ?
I’ve tried your solution but it’s not working for me
here is my main.js file:

module.exports = {
    webpackFinal: async (config, { configType }) => {
    config.module.rules.push(
      {
        test: /.s(a|c)ss$/,
        use: ['style-loader', 'sass-loader', 'css-loader']
      },
      {
        test: /.(jpe?g|gif|png|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]'
        }
      },
      {
        exclude: /.(s?(a?|c)ss|js|html)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    );

    // Return the altered config
    return config;
    },
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials']
};

and my preview.js file:

import { setCompodocJson } from '@storybook/addon-docs/angular';
import docJson from '../documentation.json';
import '@angular/localize/init';
setCompodocJson(docJson);

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' }
};

i`ve never used storybook with Angular
but
Maybe it’s a problem with the order of loader parsing. You can try this

{
  test: /.s(a|c)ss$/,
  use: ['style-loader', 'css-loader', 'sass-loader' ]
}

I hope it helps you 🙏

If anyone lands here from webpacker 6 / rails, your issue might be that you are including css-loader in your custom webpacker configs. It is included already by webpacker, I believe.

Edit: I actually ended up opting out of the webpacker scss config entirely by adding this into base.js:

const scssConfigIndex = webpackConfig.module.rules.findIndex((config) => ".scss".match(config.test))
webpackConfig.module.rules.splice(scssConfigIndex, 1)

Not sure why this has been closed? There is no solution to the issue. I am also running into this.

Apparently I have fixed this by just setting this order to my style loaders, as the documentation

Apparently I have fixed this by just setting this order to my style loaders, as the documentation

Yes — the order is a priority when dealing with loaders.
I’d consider this an answer to the question.

I’ve had same problem , first of all I’ve updated storybook webpack version to 5 , then I replaced styles ryles which was used by storybook webpack config , to rules , I use in my webpack config , belowe you can see my .storybook/main.js file

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const rules = require('../webpack/rules');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-scss',
  ],
  core: {
    builder: 'webpack5',
  },
  webpackFinal: async (config) => {
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, '../src/client'),
    ];

    config.module.rules.push(rules.css());

    config.plugins.push(new MiniCssExtractPlugin());

    const newRules = config.module.rules.filter(
      (entity) =>
        ![/.css$/, /.s[ca]ss$/].some(
          (regExp) => regExp.toString() === entity.test.toString()
        )
    );

    return {
      ...config,
      module: {
        ...config.module,
        rules: newRules,
      },
    };
  },
};

webpack/rules.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const css = () => {
  return {
    test: /.scss$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          modules: true,
        },
      },
      {
        loader: 'sass-loader',
      },
    ],
  };
};

i had the same error, i added .scss to the css file on my laravel webpack.mix.js

mix.sass(‘resources/ui/frontend/css/frontend.scss‘, ‘public/assets/frontend/css’);

I am using webpack5, and encounter the same problem, the error caused by the false module’s rules, as follows:

The regular expression for css files should be /.css/i, haha.

I got this error, when I apply loaders to the same files twice.

// webpack.config.js with error
{
//...
  module: {
    rules: [
      {
        test: /.(scss|css)$/,
        use: ...
      },
      {
        test: /.module.(scss|css)$/,
        use: ...
      },
    ]
  }
}

// webpack.config.js without error
{
//...
  module: {
    rules: [
      {
        oneOf: [ // <---
          {
            test: /.(scss|css)$/,
            use: ...
          },
          {
            test: /.module.(scss|css)$/,
            use: ...
          },
        ]
      }
    ]
  }
}

I finally got storybook 6.5.9 and react 18.x to work.
I had to use a combination of most of the suggestions above…

Below is my .storybook/main.js

const path = require('path');

const alias = {
  'my-kit': path.resolve(__dirname, '../src'),
};

module.exports = {
  stories: [
    './stories/**/*.stories.mdx',
    './stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/preset-create-react-app',
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
  webpackFinal: async (config) => {
    const scssConfigIndex = config.module.rules.findIndex((c) =>
      '.scss'.match(c.test),
    );
    if (scssConfigIndex > 0 && config.module.rules[scssConfigIndex]?.oneOf)
      config.module.rules[scssConfigIndex].oneOf.push({
        test: /.(css|s(a|c)ss)$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../'),
      });
    else
      config.module.rules.push({
        test: /.(css|s(a|c)ss)$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../'),
      });
    return {
      ...config,
      resolve: { ...config.resolve, alias },
    };
  },
};

I need to do some more work on the logic… But in my case I had to add the «loaders» into the oneOf rules that contained scss rules. Thank you @snowinmars for your work above.

ERROR Failed to compile with 1 error 12:40:40

error in ./src/assets/style.scss

Syntax Error: SassError: expected «}».
╷
301 │ }
│ ^
╵
src/assets/style.scss 301:2 root stylesheet

@ ./src/assets/style.scss 4:14-225 15:3-20:5 16:22-233
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.0.28:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js