{"id":22096534,"url":"https://github.com/pksilen/react-sfc-webpack-loader","last_synced_at":"2026-05-11T07:55:28.868Z","repository":{"id":35124451,"uuid":"209776383","full_name":"pksilen/react-sfc-webpack-loader","owner":"pksilen","description":"Webpack loader for React Single File Components (SFCs)","archived":false,"fork":false,"pushed_at":"2023-10-19T11:02:05.000Z","size":558,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T13:21:22.894Z","etag":null,"topics":["loader","react","sfc","single-file-component","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pksilen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["paypal.me/pksilen"]}},"created_at":"2019-09-20T11:37:30.000Z","updated_at":"2023-07-13T19:35:28.000Z","dependencies_parsed_at":"2025-01-29T07:40:05.073Z","dependency_job_id":null,"html_url":"https://github.com/pksilen/react-sfc-webpack-loader","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Freact-sfc-webpack-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Freact-sfc-webpack-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Freact-sfc-webpack-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Freact-sfc-webpack-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pksilen","download_url":"https://codeload.github.com/pksilen/react-sfc-webpack-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245191639,"owners_count":20575248,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["loader","react","sfc","single-file-component","webpack"],"created_at":"2024-12-01T04:11:31.527Z","updated_at":"2026-05-11T07:55:23.833Z","avatar_url":"https://github.com/pksilen.png","language":"JavaScript","funding_links":["paypal.me/pksilen"],"categories":[],"sub_categories":[],"readme":"# React Single File Components (SFC) Webpack Loader\nWebpack loader for React Single File Components (SFC) inspired by [Vue SFCs]\n\n[![version][version-badge]][package]\n[![build][build]][circleci]\n[![coverage][coverage]][codecov]\n[![MIT License][license-badge]][license]\n\n![React Single File Component Sample](https://raw.githubusercontent.com/pksilen/react-sfc-webpack-loader/master/assets/react-sfc-sample.png)\n\n## Prerequisites\n    \"webpack\": \"^4.0.0\",\n\n## Installation\n    npm install --save-dev react-sfc-webpack-loader\n       \n## React Single File Component\n\nReact Single File Component (SFC) is implemented in a .html file where JavaScript is put inside a single \u003cscript\u003e...\u003c/script\u003e section\nand optional CSS is put inside a single (optional) \u003cstyle\u003e...\u003c/style\u003e section\n\n## Example\n\nSee example in [example directory]\n\n### Style types\nDefine style type as follows:\n    \n  CSS\n  \n     \u003cstyle\u003e\n        ...\n        ..\n    \u003c/style\u003e\n  \n  or\n  \n    \u003cstyle type=\"text/css\"\u003e\n        ...\n        ..\n    \u003c/style\u003e\n  \n  SCSS\n    \n    \u003cstyle type=\"text/scss\"\u003e\n        ...\n        ..\n    \u003c/style\u003e\n  \n  SASS\n    \n    \u003cstyle type=\"text/sass\"\u003e\n        ...\n        ..\n    \u003c/style\u003e\n  \n  LESS\n    \n    \u003cstyle type=\"text/less\"\u003e\n      ...\n      ..\n    \u003c/style\u003e\n  \n  Stylus\n    \n    \u003cstyle type=\"text/stylus\"\u003e\n      ...\n      ..\n    \u003c/style\u003e\n   \n## CSS Modules\n\nCSS Modules support is enabled with scoped attribute:\n    \n    \u003cstyle scoped type=\"text/scss\"\u003e\n        ...\n        ..\n    \u003c/style\u003e\n\nYour CSS rule for CSS modules in Webpack config must test file extension .module.\u0026lt;style-type\u0026gt;, e.g. .module.css or .module.scss, for example:\n\n    {\n        test: /\\.module.scss$/,\n        exclude: /node_modules/,\n        use: [\n          'style-loader',\n          {\n            loader: 'css-loader',\n            options: {\n              modules: {\n                mode: 'local',\n                localIdentName: '[local]--[hash:base64:5]'\n              }\n            }\n          },\n          'sass-loader'\n        ]\n    }\n\nYour CSS is available in .html files through object named \"styles\", for example:\n\n    \u003cdiv className={styles.demo}\u003e\n   \nIf you use ESLint and get error of undefined 'styles', add following line to .html file:\n\n      /*global styles*/\n   \n## Webpack configuration\n\n### Create React App\nIf you have created your React app with Create React App, you need to eject it by running:\n    \n    npm eject\n    \n   or\n   \n    yarn eject\n\nAdd following rule to rules array in config/webpack.config.js file:\n\n    module: {\n        rules: [\n          {\n            test: /\\.html$/,\n            exclude: /node_modules/,\n            use: ['babel-loader', 'react-sfc-webpack-loader']\n          }\n          \n### Manual configuration\nHave your normal Webpack configuration\n\nHave your normal rules for style loading depending on style type (CSS/SCSS/SASS/LESS/Stylus)\n\nOnly change needed is to add this following rule to Webpack configuration:\n\n    module: {\n        rules: [\n          {\n            test: /\\.html$/,\n            exclude: /node_modules/,\n            use: ['babel-loader', 'react-sfc-webpack-loader']\n          }\n            \n## Supported tools\n* [Prettier]\n* [StyleLint]\n    Use for example following npm script in your package.json:\n    \n        \"stylelint\": \"stylelint src/**/*.html\",\n    \n* [ESLint] (below steps must be done in addition to normal ESLint installation and configuration)\n   * Install eslint-plugin-html\n   \n            npm install --save-dev eslint-plugin-html\n            \n   * Add to your ESLint configuration\n\n            {\n                \"plugins\": [\n                    \"html\"\n                ],\n                rules: [\n                    \"react/jsx-filename-extension\": [1, { \"extensions\": [\".js\", \".jsx\", \".html\"] }]\n                ]\n            }\n            \n* [Flow] (Needs ESLint and below steps must be done in addition to normal Flow installation and configuration)\n    * Install eslint-plugin-flowtype-errors\n    \n            npm install --save-dev eslint-plugin-flowtype-errors\n            \n    * Configure ESLint\n    \n            {\n                \"plugins\": [            \n                    \"flowtype-errors\"\n                ],\n                rules: [\n                   \"flowtype-errors/show-errors\": 2\n                ]\n            }                             \n        \n    * Enable flow usage in .html file\n    \n            // @flow\n            \u003cscript\u003e\n            // @flow\n            .\n            .\n            .\n            \u003c/script\u003e\n    \n## Tested IDEs/Editors\n* WebStorm\n\n## Not supported\n* TypeScript\n  \n## License\nMIT License\n\n[license-badge]: https://img.shields.io/badge/license-MIT-green\n[license]: https://github.com/pksilen/react-sfc-webpack-loader/blob/master/LICENSE\n[version-badge]: https://img.shields.io/npm/v/react-sfc-webpack-loader.svg?style=flat-square\n[package]: https://www.npmjs.com/package/react-sfc-webpack-loader\n[build]: https://img.shields.io/circleci/project/github/pksilen/react-sfc-webpack-loader/master.svg?style=flat-square\n[circleci]: https://circleci.com/gh/pksilen/react-sfc-webpack-loader/tree/master\n[coverage]: https://img.shields.io/codecov/c/github/pksilen/react-sfc-webpack-loader/master.svg?style=flat-square\n[codecov]: https://codecov.io/gh/pksilen/react-sfc-webpack-loader\n[Vue SFCs]: https://vuejs.org/v2/guide/single-file-components.html\n[Prettier]: https://prettier.io/\n[ESLint]: https://eslint.org/\n[Flow]: https://flow.org/\n[example directory]: https://github.com/pksilen/react-sfc-webpack-loader/blob/master/example\n[StyleLint]: https://stylelint.io/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpksilen%2Freact-sfc-webpack-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpksilen%2Freact-sfc-webpack-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpksilen%2Freact-sfc-webpack-loader/lists"}