{"id":14990555,"url":"https://github.com/swanie21/sass-css-modules-webpack","last_synced_at":"2025-04-12T02:24:39.039Z","repository":{"id":132551887,"uuid":"98834353","full_name":"swanie21/sass-css-modules-webpack","owner":"swanie21","description":"Create React App with Sass and CSS Modules ","archived":false,"fork":false,"pushed_at":"2018-02-03T21:05:57.000Z","size":574,"stargazers_count":79,"open_issues_count":0,"forks_count":21,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-12T02:24:32.312Z","etag":null,"topics":["css-modules","react","sass"],"latest_commit_sha":null,"homepage":"http://kirstenswanson.io/sass-css-modules-webpack/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/swanie21.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2017-07-31T00:59:04.000Z","updated_at":"2025-03-07T03:03:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"ba735ea3-e3fc-4ca3-a2ae-aca2148f995c","html_url":"https://github.com/swanie21/sass-css-modules-webpack","commit_stats":{"total_commits":5,"total_committers":2,"mean_commits":2.5,"dds":"0.19999999999999996","last_synced_commit":"bf996822f4045f4c3c621af7b5d27b7311b59011"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swanie21%2Fsass-css-modules-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swanie21%2Fsass-css-modules-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swanie21%2Fsass-css-modules-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swanie21%2Fsass-css-modules-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/swanie21","download_url":"https://codeload.github.com/swanie21/sass-css-modules-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248506289,"owners_count":21115410,"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":["css-modules","react","sass"],"created_at":"2024-09-24T14:20:22.185Z","updated_at":"2025-04-12T02:24:39.004Z","avatar_url":"https://github.com/swanie21.png","language":"JavaScript","readme":"# How to install Sass and CSS Modules into your Create React App\n\nThis project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).\n\n`npm run eject`  \n`yarn eject`\n\n`npm i sass-loader node-sass --save`  \n`yarn add sass-loader node-sass`\n\nModify the `webpack.config.dev.js` file\n\n```\nconst ExtractTextPlugin = require('extract-text-webpack-plugin');\n\n{\n  exclude: [\n    /\\.html$/,\n    /\\.(js|jsx)$/,\n    /\\.css$/,\n    /\\.json$/,\n    /\\.bmp$/,\n    /\\.gif$/,\n    /\\.jpe?g$/,\n    /\\.png$/,\n    /\\.scss$/,\n  ],\n  loader: require.resolve('file-loader'),\n  options: {\n    name: 'static/media/[name].[hash:8].[ext]',\n  },\n},\n{\n  test: /\\.css$/,\n  use: ExtractTextPlugin.extract({\n  fallback: 'style-loader',\n    use: [\n      {\n        loader: 'css-loader',\n        options: {\n          modules: true,\n          localIdentName: '[name]__[local]___[hash:base64:5]'\n        }\n      },\n    'postcss-loader'\n    ]\n  })\n},\n{\n  test: /\\.scss$/,\n  use: ExtractTextPlugin.extract({\n  fallback: 'style-loader',\n    use: [\n      {\n        loader: 'css-loader',\n        options: {\n          modules: true,\n          sourceMap: true,\n          importLoaders: 2,\n          localIdentName: '[name]__[local]___[hash:base64:5]'\n        }\n      },\n    'sass-loader'\n    ]\n  })\n},\n\nplugins: [\n  new ExtractTextPlugin({ filename: 'styles.css', allChunks: true, disable: process.env.NODE_ENV !== 'production' }),\n]  \n\n```\n\n* In order for hot reloading you will need to disable the Extract Text Plugin in the dev environment. This can be accomplished by adding `disable: process.env.NODE_ENV !== 'production'` in the ExtractTextPlugin options.\n\n\nCreate `postcss.config.js` file\n\n```\nmodule.exports = { plugins: [require('autoprefixer')] };\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswanie21%2Fsass-css-modules-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswanie21%2Fsass-css-modules-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswanie21%2Fsass-css-modules-webpack/lists"}