reactjs - Add SASS to ejected create-react-app config -
i want add .scss
support in app, created using create-react-app.
i did eject npm run eject
, installed necessary dependencies: npm install sass-loader node-sass --save-dev
inside config/webpack.config.dev.js
added loaders snippet:
{ test: /\.scss$/, include: paths.appsrc, loaders: ["style", "css", "scss"] },
so beginning of loaders array so:
loaders: [ // process js babel. { test: /\.(js|jsx)$/, include: paths.appsrc, loader: 'babel', query: require('./babel.dev') }, // "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$/, loader: 'style!css!postcss' }, // load & compile scss { test: /\.scss$/, include: paths.appsrc, loaders: ["style", "css", "scss"] },
now in jsx when try import scss file:
import './assets/app.scss';
i error:
uncaught error: cannot find module "./assets/app.scss"
so config must wrong i'm not able load .scss
files. how adjust config load .scss
files in ejected create-react-app
?
check first loader, first files , excludes other loaders files
loaders: [ { exclude: [ /\.html$/, /\.(js|jsx)$/, /\.css$/, /\.json$/, /\.svg$/ ], loader: 'url', query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' } },
so adding
/\.sass$/, /\.scss$/,
to exclude, seems fixed same problem had :d
Comments
Post a Comment