After ejecting, unsure of how to add Bourbon / Neat to webpack
See original GitHub issueI am migrating an existing, server-rendered front-end to a React app. Woo! 🎉
It’s my first pure javascript front-end, so I’m a little rusty with things like webpack. I need to bring over Bourbon and Neat which I previously setup in Brunch, so I understand the necessity for include paths etc.
After ejecting, I made the following modifications…
package.json
"devDependencies": {
...
"bourbon": "^4.2.7",
"bourbon-neat": "^1.8.0",
...
}
config/paths.js
// config after eject: we're in ./config/
module.exports = {
...
appSrc: resolveApp('src'),
bourbon: require("bourbon").includePaths,
bourbonNeat: require("bourbon-neat").includePaths,
...
};
config/webpack.config.dev.js (after also installing node-sass
which is working great)
// SASS compatibility!
{
test: /\.scss/,
include: [
paths.bourbon,
paths.bourbonNeat,
paths.appSrc
],
loaders: ["style", "css", "sass"]
},
After this, it’s my understanding that simply @import "bourbon"
from App.scss
should work, but I’m getting.
Failed to compile.
Error in ./src/App.scss
Module build failed:
@import "bourbon";
^
File to import not found or unreadable: bourbon
Parent style sheet: stdin
Does anyone see where I might be going wrong?
Issue Analytics
- State:
- Created 7 years ago
- Comments:5
Top Results From Across the Web
Neat (Bourbon) compilation issues with webpack.config.js
I'm currently trying to compile my _layout.sass file into CSS and I have dependencies on Bourbon and Neat. My current _layout.sass is this:...
Read more >Adding Webpack with Hot Module Replacement to speed up ...
Adding Webpack with Hot Module Replacement to speed up Redux/React/Sass development within ... including the correct hookups with bourbon and bourbon neat.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
After a tiny bit more research I was able to solve it myself. I realised I needed to path the include paths to
node-sass
, not the loader (which I now understand is a different thing).Here is what cleared it up for me https://github.com/jtangelder/sass-loader#sass-options
Hopefully this helps someone else in the future 🎉
@designbyadrian Yes they do 😃
webpack.config.dev.js
config/paths.js
(How I do it, anyway)