Yashi-2

OK, i found the issue. check this out. its bundled using parcel.js it does the same thing like webpack. i think the issue is in hot-module replacement, when we start dev or production mode. webpack write link-href tag into the file head area (invisible) but in this current situation link-href not presence in html file. production build also not presence the link-href until you build, but when i include css file directly in header area there is no issue at all. to check the issue. just comment out the html link-href. https://codesandbox.io/s/9l9xvz806p

this is the expected behavior. but it doesn't work when i work with webpack and imports

yes for development i want to use hot module replacement, but there is a feature call writetodisk. it will allow us to output css into a file. i just tested it, it also doesn't work. i mean file is outputting correctly but error is still there. actually i'm thinking about how to give you guys a codepen demo. i don't know how webpack import will handle in codepen

still no luck. i did everything you asked. but no luck :(

for development server its all apply to style tag, production build, css files export separately

i'll do that now

Yes

webpack.dev.js - scss rule rules: [{ test: /\.(scss|css)$/, exclude: /node_modules/, use: [ "style-loader", { loader: "css-loader", options: { // minimize: true, modules: false, importLoaders: 1 } }, { loader: 'postcss-loader', options: { sourceMap: true, ident: 'postcss' } }, { loader: "sass-loader", options: { sourceMap: true, includePaths: [ path.resolve(__dirname, 'node_modules/compass-mixins/lib/'), path.resolve(__dirname, 'node_modules/foundation-sites/scss/'), path.resolve(__dirname, 'node_modules/bootstrap/scss/'), path.resolve(__dirname, 'node_modules/bourbon/core/'), ] } } ] }, with css-loader

selecting correct element

its returning the correct element. sorry i didn't use css-loader. i use scss-loader only

so sorry my bad. its a jQuery project. with webpack. actually its not an app. it a website . please find the attach files postcss.config.js package.json webpack.dev.js webpack.prod.js

i can, but that is the only thing in my js file. nothing else. its just a import and calling it. i don't know is this okay to give you a codepen demo. but i can attach my webpack.config.js, index.js and package.json file, or if anything else you need to solve this i can provide.

1 - Window 10 with Latest Update 2 - Just downloaded through git repo (yarn add gsap)

tried this. it gives me this error import { TimelineMax, CSSPlugin, CSSRulePlugin } from "gsap/all"; const plugins = [TimelineMax, CSSPlugin, CSSRulePlugin]; document.addEventListener("DOMContentLoaded", function(event) { // wait until all external assets are loaded (media assets, images, css, js, fonts, etc) window.addEventListener("load", function (event) { var menuLine = CSSRulePlugin.getRule('.header__outer:after'); TweenMax.to(menuLine, 1, {cssRule:{width:'100%'}}); }, false); });

i tried TreeShaking. but its still not working. import { TimelineMax, CSSPlugin, CSSRulePlugin } from "gsap/all"; const plugins = [TimelineMax, CSSPlugin, CSSRulePlugin]; var menuLine = CSSRulePlugin.getRule('.header__outer:after'); TweenMax.to(menuLine, 1, {cssRule:{width:'100%'}});