web-dev-qa-db-fra.com

Utilisez Global SCSS avec StoryBook

Je suis nouveau dans Storybook.

J'ai un .scss Fichier utilisé dans Global. Je veux importer ce fichier de Storybook.

Donc, j'ai fait le fichier .storybook/config.js et importer des SCSS à l'intérieur. Mais cela me montre une erreur.

Erreur

ERROR in ./styles/style.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js!./node_modules/sas
s-resources-loader/lib/loader.js!./styles/style.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("'
        on line 1 of C:\Users\Walter\WebstormProjects\closet-next\styles\style.scss
>> var api = require("!../node_modules/style-loader/dist/runtime/injectStylesIn
   ^

 @ ./styles/style.scss 2:26-346 43:4-64:5 46:18-338
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.
storybook/config.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

Quel est le problème? Voici main.js

main.js

const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.(js|mdx|tsx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-knobs',
    '@storybook/preset-scss',
    {
      name: '@storybook/preset-TypeScript',
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, './tsconfig.json'),
        },
        forkTsCheckerWebpackPluginOptions: {
          colors: false, // disables built-in colors in logger messages
        },
        include: [path.resolve(__dirname, '/')],
        transpileManager: true,
      },
    },
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true, 
        babelOptions: {},

      },
    },
  ],
  parameters: {
    docs: {
      inlineStories: false, 
    },
  },
  webpackFinal: config => {
    config.module.rules.Push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader', 'sass-resources-loader'],
    });
    return config;
  },
};
javascriptstorybook
8
Minsik Park

Il suffit d'ajouter cette ligne sur le dessus de .storybook/preview.js alors tout devrait être bon

import '!style-loader!css-loader!sass-loader!../src/globalStyles/global.scss';

n'oubliez pas non plus d'installer des dépendances DE DEV

yarn add -D style-loader css-loader sass-loader
2
sonnd08

Quelle version de contebook utilisez-vous? config.js a été renommé à preview.jsà partir de v5.

Pour importer des styles globaux, vous devriez créer .storybook/preview-head.html et importez votre global.scss là-bas. Cela le chargera pour toutes les histoires.

0
guacamole