CSS imports from node package fail on build, work on develop due to ~ confusion #5758
Comments
|
Do you have any expertise in how webpack should be setup to fix this? We're lacking in Sass experts here it seems so a PR from you fixing up gatsby-plugin-sass would be amazing! |
|
I have a fair amount of experience wrestling with webpack. Not sure if I have time, but I will try to have a look deeper. I'm not sure that it is sass related. This was a pure css file. Maybe it works if I convert it to sass. Notes for me or someone else: sass webpack loader should be: {
loader: 'sass-loader',
options: {
"includePaths": [
require('path').resolve(__dirname, 'node_modules')
]
}
}The css-loader docs are here: https://webpack.js.org/loaders/css-loader/ |
m-allanson
added
type: bug
|
I have a similar styles import and don't have this issue with Gatsby v2 |
|
@crucialfelix FWIW, the non-tilde case seems to be fine if I configure (in {
resolve: `gatsby-plugin-sass`,
options: {
includePaths: [
require('path').resolve(__dirname, 'node_modules')
]
}
},This is pretty much your suggested webpack loader config applied. |
|
Great, thanks for the responses ! I will try it and then see about a PR for 1.9. Looking forward to moving to 2 myself. |
|
I renamed This means that this gatsby-config.js works: {
resolve: `gatsby-plugin-sass`,
options: {
includePaths: [
require('path').resolve(__dirname, 'node_modules')
]
}
},To get it work for css imports I think we can modify the base webpack config something like this: In module.exports = {
modifyWebpackConfig: function modifyWebpackConfig(config, env) {
config.merge({
resolve: {
include: [require("path").resolve(__dirname, "./node_modules")]
}
});
return config;
}
};but apparently that is an out of date example and v1 docs: https://github.com/gatsbyjs/gatsby/blob/v1/docs/docs/add-custom-webpack-config.md So path of least resistance for me is to just use .scss files. This happens a lot with webpack. Exhaustion sets in, budget runs out, you take the first exit. |
gatsbot
bot
added
the
stale?
|
Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open! |
|
This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue. |
Description
CSS imports from a node package work in develop, but fail in build.
CSS imports in The Wacky World of Webpack are supposed to use a tilde:
~package.gatsby developdoes NOT find the file if there is a tilde.gatsby builddoes NOT find the file is there ISN'T a tilde.Steps to reproduce
layouts/index.js
layout.css
But that local file does work if included on
layouts/index.jsThis works for the no-tilde imports.
This works only for the tilde imports.
Expected result
Builds
Actual result
build failure:
develop failure (with tilde):
Environment
matterminds ❯ gatsby info --clipboard System: OS: macOS High Sierra 10.13.3 CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz Shell: 5.3 - /bin/zsh Binaries: Node: 10.1.0 - ~/.nvm/versions/node/v10.1.0/bin/node Yarn: 1.7.0 - /usr/local/bin/yarn npm: 6.1.0 - ~/.nvm/versions/node/v10.1.0/bin/npm Browsers: Chrome: 66.0.3359.181 Safari: 11.0.3 npmPackages: gatsby: 1.9.269 => 1.9.269 gatsby-link: 1.6.44 => 1.6.44 gatsby-plugin-antd: 1.0.12 => 1.0.12 gatsby-plugin-react-helmet: 2.0.11 => 2.0.11 gatsby-plugin-sass: 1.0.26 => 1.0.26 gatsby-source-filesystem: 1.5.38 => 1.5.38 gatsby-transformer-json: 1.0.19 => 1.0.19 npmGlobalPackages: gatsby-cli: 1.1.58 gatsby: 1.9.270File contents (if changed)
gatsby-config.js: N/Apackage.json: N/A{ "name": "matterminds", "version": "1.0.0", "description": "MVP Generator for production of websites from data input", "main": "index.js", "scripts": { "make": "ts-node make.ts", "activate": "ts-node activate.ts", "start": "gatsby develop", "build": "gatsby build", "serve": "gatsby serve", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Chris Sattinger", "license": "All rights reserved", "dependencies": { "@types/es6-promise": "3.3.0", "@types/js-yaml": "3.11.1", "@types/lodash": "4.14.109", "@types/make-dir": "1.0.3", "@types/mz": "0.0.32", "@types/node": "10.3.0", "@types/recursive-readdir": "2.2.0", "gatsby": "1.9.269", "gatsby-link": "1.6.44", "gatsby-plugin-antd": "1.0.12", "gatsby-plugin-react-helmet": "2.0.11", "gatsby-plugin-sass": "1.0.26", "gatsby-source-filesystem": "1.5.38", "gatsby-transformer-json": "1.0.19", "js-yaml": "3.11.0", "lodash": "4.17.10", "make-dir": "1.3.0", "mz": "2.7.0", "purecss": "1.0.0", "react-helmet": "5.2.0", "recursive-readdir": "2.2.2", "ts-node": "6.0.5", "typescript": "2.9.1" } }gatsby-node.js: N/Agatsby-browser.js: N/Agatsby-ssr.js: N/AThe text was updated successfully, but these errors were encountered: