I see, thanks for the explanation. The constantly reappearing backend notification is slightly annoying, but not really a problem. I’m only recently switching to Sage 9, guess I’m still used to 8’s ways.
Anyway, don’t want to further hijack webspilka’s thread 
When I run yarn run start. I can work only with http://localhost:3000/, my main site “http://sage48.dev” does not load styles.
Ideally, I would like both sites to work simultaneously. But I think this is probably impossible?
So I decided to add another mode
For example
yarn run build:watch
I want to test main site “http://sage48.dev” without proxy (browsersync), but with webpack --watch.
For this I add to package.json
"build:watch": "webpack --progress --watch --config resources/assets/build/webpack.config.js",
but –watch option in webpack start browsersync
In webpack.config.js I find
if (config.enabled.watcher) {
webpackConfig.entry = require('./util/addHotMiddleware')(webpackConfig.entry);
webpackConfig = merge(webpackConfig, require('./webpack.config.watch'));
}
I think if I rewrite this code, I will turn off browsersync
I think if I rewrite this code my main site “http://sage48.dev” will work with webpack --watch.
Or is there a simpler solution add webpack --watch for main domain?
I’m not familiar enough with the intricacies of configuring webpack to advise you on adding a command, but may I ask why you need this to work with your sage48.dev URL? I don’t see an advantage, considering both it and localhost (with browsersync running) display the same content.
If use http://localhost:3000/ and Front-end content Editor (For example: WP Quick FrontEnd Editor – WordPress Plugin – WordPress plugin | WordPress.org) I get http://localhost:3000/ based urls in wordpress database
Don’t edit content within a Browsersync session, or do a find and replace
If someone also needs a watch without Browsersync
You can just slightly edit
resources/assets/build/webpack.config.js
new ExtractTextPlugin({
filename: `styles/${assetsFilenames}.css`,
allChunks: true,
+ // disable: (config.enabled.watcher)
}),
...
new webpack.LoaderOptionsPlugin({
minimize: config.enabled.optimize,
+ // debug: config.enabled.watcher,
stats: { colors: true }
}),
...
// and add comments to :
// if (config.enabled.watcher) {
// webpackConfig.entry = require('./util/addHotMiddleware')(webpackConfig.entry);
// webpackConfig = merge(webpackConfig, require('./webpack.config.watch'));
// }
After this watch will work without Browsersync start
I went further
Replaced config.enabled.watcher to my variable config.enabled.bsenable
// watch and Browsersync:
"start": "webpack --env.bsenable=true --hide-modules --watch --config resources/assets/build/webpack.config.js ",
// only watch
"build:watch": "webpack --watch --config resources/assets/build/webpack.config.js",
"build": "webpack --config resources/assets/build/webpack.config.js",
And I got what I wanted
Thanks to all
Then IMHO we should use a simple console message or a comment in main.css or a section in docs so those of us who’re not coming from frontend background can understand such behavior happening via webpack.
I get this behavior but i’m not seeing any styles in my browser.
I deleted my dist, deleted my node_modules, ran yarn, ran yarn build and the dist appeared styles included, then i ran yarn start and dist is replaced with new dist without the styles. And no css appears in browser.
I get this error in the console:
Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
at bootstrap.js:1414
at bootstrap.js:1823
at Object. (bootstrap.js:3831)
at Object.webpack_exports.a.init (bootstrap.js:3831)
at webpack_require (bootstrap 9248746d73a54aa87581:659)
at fn (bootstrap 9248746d73a54aa87581:85)
at Object. (main.js:1)
at Object. (main.js:25)
at webpack_require (bootstrap 9248746d73a54aa87581:659)
at fn (bootstrap 9248746d73a54aa87581:85)
I get this warning in the console:
(index):28 Resource interpreted as Stylesheet but transferred with MIME type text/html: “http://localhost:3000/”.
This i s what the link tag looks like in the header, with a warning triangle:
<link rel='stylesheet' id='sage/main.css-css' href='http://framja.dev/wp-content/themes/framja/dist/styles/main.css' type='text/css' media='all' />
And no errors in the terminal.
Is there any chance you tried to update Sage from an earlier beta to Beta 4? I think we’re seeing a few threads about the same issue over the last few days about how WordPress gets confused when updating Sage in-place.
Nope, not yet. I’m new to Sage and don’t yet know the best way to update.
I am using beta 3.
I can confirm that on beta 4, that main.css is still being requested by the browser.
When running run start the dist folder is trashed, and only scripts are generated. This is “how webpack works” as mentioned as earlier, I get it. But it’s not a great development experience.
I personally don’t think it’s a bad dev experience in general. It’s just a matter of knowing how to use these tools, which can feel like a lot in the beginning, but it all makes sense once you get into it.
The whole point of working with webpack is to have both js and css server from memory and not local files, until you actually run the build process. If you want to avoid the request for the style.css when it’s not being created, simply change your setup.php to perform a check if the file exists. Hopefully this will be clearer to all users once the docs are all up to date and published
I’m not sure what the problem is here? Why is it not great?
The documentation doesn’t show that users should ignore webpack hot module loader errors and 404 errors.
It’s in the chrome console in the video I supplied.
While I understand that the docs are still not fully up to date I believe everyone has made an exceptional effort in spreading the knowledge and assisting the others here on Discourse. A little patience goes a long way Things are changing and while it can be frustrating at times (been there!) it’s for the best, for a much more enjoyable developer experience a far superior products for our clients!
Im sorry but i really don’t get it. I see styles when i do a build (like visual styles in the browser window) and then when ever i run start all styling disappears (like visually nothing but browser default). I can see that it’s watching for changes and rebuilding when i make changes in my scss, but no styles, nothing.
/ Lost noob
Which address are you pointing your browser to? You should be able to see all changes when pointing to the Browsersync session on localhost:3000
Looked at both the devUrl http://framja.dev and http://localhost:3000, but get no styles.
I can see the styles after a build in the devUrl, but then when i start , nothing.
My config.json:
{
“entry”: {
“main”: [
"./scripts/main.js",
"./styles/main.scss"
],
“customizer”: [
"./scripts/customizer.js"
]
},
“publicPath”: “/wp-content/themes/framja”,
“devUrl”: “http://framja.dev”,
“proxyUrl”: “http://localhost:3000”,
“cacheBusting”: “[name]_[hash:8]”,
“watch”: [
"{app,resources/views}/**/*.php"
]
}
I too was began to experience this issue with the latest Bootstrap 4 Beta release. I ended up downgrading to the latest alpha release which isn’t dependent on popper.js. I downgraded by running yarn remove bootstrap and then yarn add bootstrap@4.0.0-alpha.6.
Obviously, this is merely a short term solution (unless you want to go into production with the Bootstrap alpha) so I’d be grateful if someone were able to demonstrate how to resolve the popper.js dependency issue.
I don’t believe there is still a dependency problem with popper.js. This was resolved in Sage9 with this PR. What problem are you seeing?