javascript - Module not found: Can't resolve 'style' -

i trying configure css modules using sass. have followed tutorials none seem work. webpack config created create-react-scripts. seemed getting error "module not found: can't resolve 'style'" great. error seems generated @ import statement in modal.js file below. (import styles "../css/modal.scss";) have installed sass loader. package.json file can found below.

webpack.config.dev.js:

'use strict';  const autoprefixer = require('autoprefixer'); const path = require('path'); const webpack = require('webpack'); const htmlwebpackplugin = require('html-webpack-plugin'); const casesensitivepathsplugin = require('case-sensitive-paths-webpack-plugin'); const interpolatehtmlplugin = require('react-dev-utils/interpolatehtmlplugin'); const watchmissingnodemodulesplugin = require('react-dev-utils/watchmissingnodemodulesplugin'); const eslintformatter = require('react-dev-utils/eslintformatter'); const modulescopeplugin = require('react-dev-utils/modulescopeplugin'); const getclientenvironment = require('./env'); const paths = require('./paths'); const extracttextplugin = require('extract-text-webpack-plugin');  // webpack uses `publicpath` determine app being served from. // in development, serve root. makes config easier. const publicpath = '/'; // `publicurl` `publicpath`, provide our app // %public_url% in `index.html` , `process.env.public_url` in javascript. // omit trailing slash %public_path%/xyz looks better %public_path%xyz. const publicurl = ''; // environment variables inject our app. const env = getclientenvironment(publicurl);  // development configuration. // focused on developer experience , fast rebuilds. // production configuration different , lives in separate file. module.exports = {   // may want 'eval' instead if prefer see compiled output in devtools.   // see discussion in https://github.com/facebookincubator/create-react-app/issues/343.   devtool: 'cheap-module-source-map',   // these "entry points" our application.   // means "root" imports included in js bundle.   // first 2 entry points enable "hot" css , auto-refreshes js.   entry: [     // include alternative client webpackdevserver. client's job     // connect webpackdevserver socket , notified changes.     // when save file, client either apply hot updates (in case     // of css changes), or refresh page (in case of js changes). when     // make syntax error, client display syntax error overlay.     // note: instead of default webpackdevserver client, use custom 1     // bring better experience create react app users. can replace     // line below these 2 lines if prefer stock client:     // require.resolve('webpack-dev-server/client') + '?/',     // require.resolve('webpack/hot/dev-server'),     require.resolve('react-dev-utils/webpackhotdevclient'),     // ship few polyfills default:     require.resolve('./polyfills'),     // errors should considered fatal in development     require.resolve('react-error-overlay'),     // finally, app's code:     paths.appindexjs,     // include app code last if there runtime error during     // initialization, doesn't blow webpackdevserver client, ,     // changing js code still trigger refresh.   ],   output: {     // next line not used in dev webpackdevserver crashes without it:     path: paths.appbuild,     // add /* filename */ comments generated require()s in output.     pathinfo: true,     // not produce real file. it's virtual path     // served webpackdevserver in development. js bundle     // containing code our entry points, , webpack runtime.     filename: 'static/js/bundle.js',     // there additional js chunk files if use code splitting.     chunkfilename: 'static/js/[name].chunk.js',     // url app served from. use "/" in development.     publicpath: publicpath,     // point sourcemap entries original disk location (format url on windows)     devtoolmodulefilenametemplate: info =>       path.resolve(info.absoluteresourcepath).replace(/\\/g, '/'),   },   resolve: {     // allows set fallback webpack should modules.     // placed these paths second because want `node_modules` "win"     // if there conflicts. matches node resolution mechanism.     // https://github.com/facebookincubator/create-react-app/issues/253     modules: ['node_modules', paths.appnodemodules].concat(       // guaranteed exist because tweak in `env.js`       process.env.node_path.split(path.delimiter).filter(boolean)     ),     // these reasonable defaults supported node ecosystem.     // include jsx common component filename extension support     // tools, although not recommend using it, see:     // https://github.com/facebookincubator/create-react-app/issues/290     // `web` extension prefixes have been added better support     // react native web.     extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],     alias: {        // support react native web       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/       'react-native': 'react-native-web',     },     plugins: [       // prevents users importing files outside of src/ (or node_modules/).       // causes confusion because process files within src/ babel.       // fix this, prevent importing files out of src/ -- if you'd to,       // please link files node_modules/ , let module-resolution kick in.       // make sure source files compiled, not processed in way.       new modulescopeplugin(paths.appsrc),     ],   },   module: {     strictexportpresence: true,     rules: [       // todo: disable require.ensure it's not standard language feature.       // waiting https://github.com/facebookincubator/create-react-app/issues/2176.       // { parser: { requireensure: false } },        // first, run linter.       // it's important before babel processes js.       {         test: /\.(js|jsx)$/,         enforce: 'pre',         use: [           {             options: {               formatter: eslintformatter,              },             loader: require.resolve('eslint-loader'),           },         ],         include: paths.appsrc,       },       // ** adding/updating loaders **       // "file" loader handles assets unless explicitly excluded.       // `exclude` list *must* updated every change loader extensions.       // when adding new loader, must add `test`       // new entry in `exclude` list "file" loader.        // "file" loader makes sure assets served webpackdevserver.       // when `import` asset, (virtual) filename.       // in production, copied `build` folder.       {         exclude: [           /\.html$/,           /\.(js|jsx)$/,           /\.css$/,           /\.json$/,           /\.bmp$/,           /\.gif$/,           /\.jpe?g$/,           /\.png$/,           /\.scss$/         ],         loader: require.resolve('file-loader'),         options: {           name: 'static/media/[name].[hash:8].[ext]',         },       },       // "url" loader works "file" loader except embeds assets       // smaller specified limit in bytes data urls avoid requests.       // missing `test` equivalent match.       {         test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],         loader: require.resolve('url-loader'),         options: {           limit: 10000,           name: 'static/media/[name].[hash:8].[ext]',         },       },       // process js babel.       {         test: /\.(js|jsx)$/,         include: paths.appsrc,         loader: require.resolve('babel-loader'),         options: {            // feature of `babel-loader` webpack (not babel itself).           // enables caching results in ./node_modules/.cache/babel-loader/           // directory faster rebuilds.           cachedirectory: true,         },       },       // "postcss" loader applies autoprefixer our css.       // "css" loader resolves paths in css , adds assets dependencies.       // "style" loader turns css js modules inject <style> tags.       // in production, use plugin extract css file,       // in development "style" loader enables hot editing of css.       {         test: /\.css$/,         use: [           require.resolve('style-loader'),           {             loader: require.resolve('css-loader'),             options: {               importloaders: 1,               modules: true,               localidentname: "[name]__[local]___[hash:base64:5]"             },           },           {             loader: require.resolve('postcss-loader'),             options: {               // necessary external css imports work               // https://github.com/facebookincubator/create-react-app/issues/2677               ident: 'postcss',               plugins: () => [                 require('postcss-flexbugs-fixes'),                 autoprefixer({                   browsers: [                     '>1%',                     'last 4 versions',                     'firefox esr',                     'not ie < 9', // react doesn't support ie8 anyway                   ],                   flexbox: 'no-2009',                 }),               ],             },           },         ],       },       {         test: /\.scss$/,         use: extracttextplugin.extract({           fallback:'style-loader',           use: [             {               loader: 'css-loader',               q: {                 modules: true,                 sourcemap: true,                 importloaders: 2,                 localidentname: '[name]__[local]__[hash:base64:5]'               }             },             'sass-loader'           ]         }),         loaders: [           require.resolve('style-loader'),           require.resolve('css-loader'),           require.resolve('sass-loader')         ]       }       // ** stop ** adding new loader?       // remember add new extension(s) "file" loader exclusion list.     ],   },   plugins: [     // makes environment variables available in index.html.     // public url available %public_url% in index.html, e.g.:     // <link rel="shortcut icon" href="%public_url%/favicon.ico">     // in development, empty string.     new interpolatehtmlplugin(env.raw),     // generates `index.html` file <script> injected.     new htmlwebpackplugin({       inject: true,       template: paths.apphtml,     }),     // add module names factory functions appear in browser profiler.     new webpack.namedmodulesplugin(),     // makes environment variables available js code, example:     // if (process.env.node_env === 'development') { ... }. see `./env.js`.     new webpack.defineplugin(env.stringified),     // necessary emit hot updates (currently css only):     new webpack.hotmodulereplacementplugin(),     // watcher doesn't work if mistype casing in path use     // plugin prints error when attempt this.     // see https://github.com/facebookincubator/create-react-app/issues/240     new casesensitivepathsplugin(),     // if require missing module , `npm install` it, still have     // restart development server webpack discover it. plugin     // makes discovery automatic don't have restart.     // see https://github.com/facebookincubator/create-react-app/issues/186     new watchmissingnodemodulesplugin(paths.appnodemodules),     // moment.js extremely popular library bundles large locale files     // default due how webpack interprets code. practical     // solution requires user opt importing specific locales.     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack     // can remove if don't use moment.js:     new webpack.ignoreplugin(/^\.\/locale$/, /moment$/),      new extracttextplugin({'styles.css'}),   ],   // libraries import node modules don't use them in browser.   // tell webpack provide empty mocks them importing them works.   node: {     dgram: 'empty',     fs: 'empty',     net: 'empty',     tls: 'empty',   },   // turn off performance hints during development because don't   // splitting or minification in interest of speed. these warnings become   // cumbersome.   performance: {     hints: false,   }, }; 

modal.js file :

import react "react"; import reactdom "react-dom"; // import styles "../css/popupbox.css"; import styles "../css/modal.scss"; // error happens here!! 

...file continues

package.json :

{   "name": "react-hackboard",   "version": "0.1.0",   "private": true,   "dependencies": {     "autoprefixer": "7.1.1",     "babel-core": "6.25.0",     "babel-eslint": "7.2.3",     "babel-jest": "20.0.3",     "babel-loader": "7.0.0",     "babel-preset-react-app": "^3.0.1",     "babel-runtime": "6.23.0",     "case-sensitive-paths-webpack-plugin": "2.1.1",     "chalk": "1.1.3",     "css-loader": "0.28.4",     "dotenv": "4.0.0",     "eslint": "3.19.0",     "eslint-config-react-app": "^1.0.5",     "eslint-loader": "1.7.1",     "eslint-plugin-flowtype": "2.34.0",     "eslint-plugin-import": "2.2.0",     "eslint-plugin-jsx-a11y": "5.0.3",     "eslint-plugin-react": "7.1.0",     "extract-text-webpack-plugin": "2.1.2",     "file-loader": "0.11.2",     "fs-extra": "3.0.1",     "html-webpack-plugin": "2.29.0",     "jest": "20.0.4",     "node-sass": "^4.5.3",     "object-assign": "4.1.1",     "postcss-flexbugs-fixes": "3.0.0",     "postcss-loader": "2.0.6",     "promise": "7.1.1",     "react": "^15.6.1",     "react-dev-utils": "^3.0.2",     "react-dom": "^15.6.1",     "react-error-overlay": "^1.0.9",     "react-redux": "^5.0.5",     "redux": "^3.7.2",     "redux-createreducer": "^2.0.0",     "redux-thunk": "^2.2.0",     "sass-loader": "^6.0.6",     "style-loader": "0.18.2",     "sw-precache-webpack-plugin": "0.11.3",     "url-loader": "0.5.9",     "webpack": "2.6.1",     "webpack-dev-server": "2.5.0",     "webpack-manifest-plugin": "1.1.0",     "whatwg-fetch": "2.0.3"   },   "scripts": {     "start": "node scripts/start.js",     "build": "node scripts/build.js",     "test": "node scripts/test.js --env=jsdom"   },   "jest": {     "collectcoveragefrom": [       "src/**/*.{js,jsx}"     ],     "setupfiles": [       "<rootdir>/config/polyfills.js"     ],     "testmatch": [       "<rootdir>/src/**/__tests__/**/*.js?(x)",       "<rootdir>/src/**/?(*.)(spec|test).js?(x)"     ],     "testenvironment": "node",     "testurl": "http://localhost",     "transform": {       "^.+\\.(js|jsx)$": "<rootdir>/node_modules/babel-jest",       "^.+\\.css$": "<rootdir>/config/jest/csstransform.js",       "^(?!.*\\.(js|jsx|css|json)$)": "<rootdir>/config/jest/filetransform.js"     },     "transformignorepatterns": [       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"     ],     "modulenamemapper": {       "^react-native$": "react-native-web"     },     "modulefileextensions": [       "web.js",       "js",       "json",       "web.jsx",       "jsx"     ]   },   "babel": {     "presets": [       "react-app"     ]   },   "eslintconfig": {     "extends": "react-app"   },   "devdependencies": {     "node-sass": "^4.5.3",     "sass-loader": "^6.0.6",     "webpack": "^2.6.1"   } } 

i had same problem , found working solution.

please add these lines of code in "rules" array of webpack config file.

       {         test: /\.sass$/,         include: paths.appsrc,         use: [           require.resolve('style-loader'),           {             loader: require.resolve('css-loader'),             options: {               importloaders: 1,             },           },           {             loader: require.resolve('sass-loader')           }         ]       }, 

and information, @import "path/to/sass.file" if use import statement in 1 of sass files , import "path/to/sass.file" react component.

hope work too.