Ответы пользователя по тегу Фронтенд
  • Автообновление сборки (webpack) при изменение .scss?

    pterodaktil
    @pterodaktil
    js developer
    чтоб прям вот как надо)
    const env = process.env;
    const __DEV__ = env.NODE_ENV === "development";
    
    const BASE_CSS_LOADER = {
      loader: "css-loader",
      options: {
        importLoaders: 2,
        sourceMap: true,
        minimize: true
      }
    };
    const CSS_MODULES_LOADER = {
      loader: "css-loader",
      options: {
        importLoaders: 2,
        localIdentName: "[name]__[local]___[hash:base64:5]",
        modules: true,
        sourceMap: true,
        minimize: true
      }
    };
    const POSTCSS_LOADER = {
      loader: "postcss-loader",
      options: {
        sourceMap: true,
        plugins: [autoprefixer],
        minimize: true
      }
    };
    const STYLE_LOADER = __DEV__ ? "style-loader" : MiniCssExtractPlugin.loader;
    config.module.rules = [].concat(config.module.rules, [
      {
        test: /\.module\.scss$/,
        use: [
          STYLE_LOADER,
          CSS_MODULES_LOADER,
          POSTCSS_LOADER,
          "sass-loader?sourceMap"
        ]
      },
      {
        test: /\.module\.css$/,
        use: [STYLE_LOADER, CSS_MODULES_LOADER, POSTCSS_LOADER]
      },
      {
        test: /\.scss$/,
        exclude: /\.module\.scss$/,
        use: [
          STYLE_LOADER,
          BASE_CSS_LOADER,
          POSTCSS_LOADER,
          "sass-loader?sourceMap"
        ]
      },
      {
        test: /\.less$/,
        exclude: /\.module\.less$/,
        use: [
          STYLE_LOADER,
          BASE_CSS_LOADER,
          POSTCSS_LOADER,
          "less-loader?sourceMap"
        ]
      },
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [STYLE_LOADER, BASE_CSS_LOADER, POSTCSS_LOADER]
      }
    ]);
    Ответ написан
  • Как оцентровать тики в recharts?

    pterodaktil
    @pterodaktil
    js developer
    Нашел такой вариант
    const CustomizedAxisTick = ({ x, y, stroke, payload }) => (
      <g transform={`translate(${x + delta},${y})`}>
        <text x={0} y={0} dy={16} textAnchor="start" fill="#666">{payload.value}</text>
      </g>
    );
    ...
    <XAxis dataKey="name" height={60} tick={<CustomizedAxisTick/>}/>
    ...

    дельту можно подобрать
    Ответ написан