Не могу стилизовать мои компоненты React по имени класса в сборнике рассказов - PullRequest
Новая
       20

Не могу стилизовать мои компоненты React по имени класса в сборнике рассказов

0 голосов
/ 01 июля 2019

Я не могу стилизовать свои реагирующие компоненты в сборнике рассказов по названию их класса!

Если я использую общий элемент, такой как div, <h1> и т. Д., Я могу что-то стилизовать. Это должно быть что-то с моей конфигурацией webpack, но я просто не знаю что.

Мои rules.js, которые были переданы в webpack.config.js

rules.js

const { configureBabel } = require('../_babel.config');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

/**
 * @param themePaths {ThemePaths}
 * @param selectMode {SelectMode}
 * @param selectTarget {SelectTarget}
 * @returns {*[]}
 */
function rules(themePaths, selectMode, selectTarget) {
    const babelOptions = configureBabel(selectMode, selectTarget);
    const babelEnvDeps = require('webpack-babel-env-deps');
    return [
        {
            test: /\.graphql$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'graphql-tag/loader',
                },
            ],
        },
        {
            include: [
                path.resolve(__dirname, '..', 'server'),
                path.resolve(__dirname, '..', 'runtime'),
                themePaths.src,
                themePaths.generated,
                path.resolve(__dirname, '..', '..', 'swagger'),
                path.resolve(__dirname, '..', 'node_modules', 'debug'),
                babelEnvDeps.include(),
            ],
            // exclude: [/node_modules/],
            test: /\.(ts|tsx|mjs|js|svg|graphql)$/,
            use: [
                {
                    loader: 'babel-loader',
                    options: babelOptions,
                },
            ],
        },
        {
            test: [/\.scss$/],
            use: [
                selectMode({ development: 'style-loader' }),
                selectMode({ production: MiniCssExtractPlugin.loader }),
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                        localIdentName: '[name]-[local]-[hash:base64:3]',
                        modules: true,
                    },
                },
                {
                    loader: 'sass-loader',
                    options: {
                        data: `
                        @import "_vars";
                        @import "_mixins";
                        @import "_normalize";
                        @import "_reset";
                        `,
                        includePaths: ['src/scss'],
                    },
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: [require('autoprefixer')()],
                    },
                },
                'resolve-url-loader',
            ].filter(Boolean),
        },
        {
            test: /\.(jpe?g|png|svg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {},
                },
            ],
        },
        {
            test: /\.(woff2?)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                    },
                },
            ],
        },
    ];
}

module.exports.rules = rules;

Мой webpack.config.js

const { resolve } = require('path');

module.exports = (baseConfig, env, defaultConfig) => {
    const rulesFn = require('../.webpack/rules').rules;
    const rules = rulesFn(
        {
            outputLegacy: '',
            generated: '',
            output: '',
            src: '',
        },
        input => input['development'],
        input => input['modern'],
    );
    delete rules[1].include;
    defaultConfig.module.rules = rules;
    defaultConfig.resolve.extensions = ['.ts', '.tsx', '.js'];
    defaultConfig.resolve.alias = {
        ...(defaultConfig.resolve.alias || {}),
        swagger: resolve(__dirname, '..', '..', 'swagger'),
    };

    return defaultConfig;
};

Мой config.ts

import { configure } from "@storybook/react";

const req = require.context('../src/', true, /.stories.tsx$/);

function loadStories() {
    req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);

Компонент My React EateryItem.tsx

import React from "react";
import "./EateryItem.scss";

export const EateryItem: React.SFC<any> = props => {
  return (
    <div className="Eatery" key={props.id}>
      <h3 className="name">{props.name}</h3>
      <p className="address">{props.address}</p>
      <p className="type">{props.foodType}</p>
    </div>
  );
};

Мой EateryItem.scss, который, как мне кажется, украсил их классом namme 

.Eatery {
    border: 5px dashed $color-primary;
    margin: $base-spacing;
}

.name {
    background: red;
}

Не уверен, почему я не могу стилизовать эти имена классов?

1 Ответ

0 голосов
/ 02 июля 2019

Итак, после проверки имен классов в внедренном файле .js из моего веб-пакета storybook я понял, что он хэширует имена классов.

Я вошел в свой rules.js и выключил модули css, установивfalse. 

loader: 'css-loader',
options: {
  importLoaders: 1,
  localIdentName: '[name]-[local]-[hash:base64:3]',
  modules: false,
},

Затем он перестал хешировать className s и начал работать!

...