Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Get styleName errors, try to use this plugin with typescript and scss, mini-css-extract-plugin

Aperta
  • Qualcosa non va?
#208 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
25/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
babel, javascript, react, scss, typescript, webpack
Ambito
build-system, frontend

Direzione di ricerca

Inizia riproducendo gli errori di styleName segnalati usando lo snippet del componente, webpack.config.js e .babelrc mostrati nell’issue. Traccia il modo in cui il plugin gestisce i nomi di classe calcolati con i moduli SCSS e MiniCssExtractPlugin; il lavoro è concluso quando i nomi degli stili delle icone elencati vengono risolti senza errori nella configurazione TypeScript indicata.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

question

i try to use .scss files in my project with this plugin.
success build and start dev server, but i get styleName errors like that.
2018-11-05 11 20 00

what is strange is that only some styleNames(icon-size__small, icon-color__marine, icon-type__flag) do not work well.

first i get this errors, when use with classNames.
try to it without using classNames, but i got same errors.

class Icon extends React.Component<Props, States> {
  static defaultProps = {
    iconSize: IconSize.SMALL,
    iconColor: IconColor.MARINE,
  }

  constructor(props: Props) {
    super(props);
    this.state = {};
  }

  render() {
    const { iconSize, iconColor, iconType } = this.props;
    return (
      <span styleName={classNames({
        "icon": true,
        [iconSize]:  true,
        [iconColor]: true,
        [iconType]:  true,
      })} />
    );
  }
}

my package.json

"dependencies": {
    "babel-polyfill": "6.26.0",
    "classnames": "2.2.6",
    "react": "16.6.0",
    "react-dom": "16.6.0",
    "react-router": "4.3.1",
    "react-router-dom": "4.3.1",
    "recompose": "0.30.0",
  },
  "devDependencies": {
    "@types/classnames": "2.2.6",
    "@types/react": "16.4.14",
    "@types/react-css-modules": "4.6.2",
    "@types/react-dom": "16.0.8",
    "@types/react-redux": "6.0.9",
    "@types/react-router-dom": "4.3.1",
    "@types/react-router-redux": "5.0.16",
    "autoprefixer": "9.3.1",
    "babel-loader": "7.1.2",
    "babel-plugin-react-css-modules": "3.4.2",
    "babel-plugin-transform-react-jsx": "6.24.1",
    "babel-preset-env": "1.7.0",
    "babel-preset-react": "6.24.1",
    "css-loader": "1.0.1",
    "file-loader": "2.0.0",
    "html-webpack-plugin": "3.2.0",
    "mini-css-extract-plugin": "0.4.4",
    "node-sass": "4.9.4",
    "postcss-loader": "3.0.0",
    "postcss-scss": "2.0.0",
    "react-css-modules": "4.7.7",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.1",
    "ts-loader": "5.2.1",
    "typescript": "3.1.1",
    "uglifyjs-webpack-plugin": "2.0.1",
    "webpack": "4.23.1",
    "webpack-cli": "3.1.2",
    "webpack-dev-server": "3.1.10"
  }

my webpack.config.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const SOURCE_DIRECTORY = path.resolve(__dirname, 'resources');
const OUTPUT_DIRECTORY = path.resolve(__dirname, 'build');
const MODULE_DIRECTORY = path.resolve(__dirname, 'node_modules');

module.exports = (env, argv) => {
  const __DEV__ = argv.mode === 'development';
  return ({
    context: SOURCE_DIRECTORY,
    entry: [
      'babel-polyfill',
      './index.tsx'
    ],
    output: {
      filename: 'index.js',
      path: OUTPUT_DIRECTORY,
      publicPath: '/'
    },
    module: {
      rules: [
        {
          include: SOURCE_DIRECTORY,
          test: /\.(ts|tsx)$/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                cacheDirectory: __DEV__
              }
            },
            'ts-loader'
          ]
        },
        {
          include: SOURCE_DIRECTORY,
          test: /\.scss$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                modules: true,
                minimize: !__DEV__,
                sourceMap: __DEV__,
                localIdentName: __DEV__ ? '[hash:base64:5]' : null,
                url: false
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: __DEV__
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: __DEV__
              }
            }
          ]
        }
      ]
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
    },
    devServer: {
      host: 'localhost',
      port: 8082,
      compress: true,
      contentBase: __dirname,
      historyApiFallback: true,
      hot: true
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }),
      new HtmlWebpackPlugin({
        template: 'index.html',
        filename: 'index.html'
      }),
      new MiniCssExtractPlugin({
        filename: 'index.css'
      }),
      ...(__DEV__ ? [] : [new UglifyJsPlugin()])
    ],
    cache: false
  });
};

my .babelrc

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            "IE >= 11",
            "Edge >= 16",
            "Chrome >= 64",
            "Firefox >= 58",
            "Safari >= 11"
          ]
        },
        "modules": false
      }
    ],
    "react"
  ],
  "plugins": [
    "transform-react-jsx",
    [
      "react-css-modules",
      {
        "context": "resources",
        "filetypes": {
          ".scss": {
            "syntax": "postcss-scss"
          }
        },
        "handleMissingStyleName": "warn",
        "generateScopedName": "[hash:base64]"
      }
    ]
  ]
}

is it my mistake? or plugin bugs?

Lingua principale
JavaScript
Stelle
2k
Fork
159
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di gajus/babel-plugin-react-css-modules

Tutte le issue di gajus/babel-plugin-react-css-modules

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.