Open MaffooBristol opened 8 years ago
I'm also having trouble with the same issue. I'd like to disable the mangled class names for a single file that I'm importing.
Currently it's possible to use https://github.com/postcss/postcss-nested to allow marking blocks as "global". Eg.
:global {
.a { ... }
.b { ... }
}
The output will contain .a
and .b
, without any scoping.
Ideally we'd be able to do
:global {
@import "file.css";
}
however it looks like there are some ordering issues around that. Something to look into!
@joshwnj How can I use the global with ES6 modules?
In my code I have:
import 'bootstrap/dist/css/bootstrap.css';
that build to a bundle.css. But the bundle have the prefixes.
with postcss-nested I should use this?
:global {
@import "bootstrap/dist/css/bootstrap.css"
}
I found this answer: https://github.com/postcss/postcss-import/issues/179#issuecomment-264287790
But it seems not working with css-modulesify:
Error: Cannot find module '!node_modules/bootstrap-vue/dist/bootstrap-vue.css' from ...
I found a workaround using generateScopedName option:
b.plugin(modulesify, {
output: path.resolve(
dirs.buildClient,
'bundle.css',
),
global: true,
generateScopedName: function(name, filename) {
var matches = filename.match(/^\/node_modules/);
if (matches) return name;
if (process.env.NODE_ENV === 'production') {
return modulesify.generateShortName(name, filename);
} else {
return modulesify.generateLongName(name, filename);
}
}
});
Hello,
I'm using css-modulesify like so:
... along with the require code:
... however, this creates scoped class names such as
._node_modules_react_virtualized_styles__FlexTable__headerColumn
, which breaks the CSS for the module. Please bear in mind that I'm quite new to react and browserify so I may just be being thick.Is there a way of turning off the scoping from the command line? Or if not, is there something I'm missing that would make my components work normally with the scope?
Thanks Matt