Comments (5)
Please use:
{
test: /\.(s[ac]|c)ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{
loader: "css-loader",
options: {
modules: {
namedExport: true
}
}
},
"postcss-loader",
"sass-loader"
],
},
named export is not enabled by default right now (will be in the next major release)
from webpack.
This is how it is imported in every file:
import {layerShow, layerHide, siteWrapper} from "../../../css/layout.css";
Relevant block in the webpack.config.js file:
{
test: /\.(sa|sc|c)ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{
loader: "css-loader",
options: {
modules: {
localIdentName: "[local]--[hash:base64:5]",
}
}
},
"postcss-loader",
'sass-loader',
]
},
Versions of the modules:
sass-loader: 14.1.0
postcss-loader: 8.1.0
css-loader: 6.10.0
mini-css-extract-plugin: 2.8.0
webpack: 5.90.1
from webpack.
In the repo I provided there is no problem with the build, but in my main project I'm still getting errors in this pattern now,
WARNING in ./src/components/desktop/layout/PortalNav.js 120:15-32
export 'default' (imported as 'formStyles') was not found in '../../../css/form.css' (possible exports: active, alert, badge, bar, button, buttonFaded, buttonGroup, buttonIcon, buttonPrimary, buttonPrimaryOutline, buttonSecondary, buttonSecondaryOutline, buttonSmall, buttonSuccess, check, danger, dropButton, dropdown, dropdownItem, dropdownMenu, dropdownMenuRight, fill, formGroup, hidePart, icon, image, info, input, invalidInput, invalidLabel, muted, part, poll, popupTransition, progress, small, success, validInput, validLabel, warning)
@ ./src/util/components/RouteLayout.js 9:0-66 19:40-49
@ ./src/router.js 4:0-56 204:39-50 209:39-50 214:39-50 219:39-50 224:39-50 229:39-50 234:39-50 239:39-50 244:39-50 249:73-84 254:73-84 259:39-50 264:73-84 269:39-50 274:39-50 279:73-84 287:39-50 292:39-50 297:39-50 302:39-50 307:39-50 312:39-50 317:39-50
@ ./src/index.js 8:0-30 31:83-89
Here is my full Webpack Config file:
https://gist.github.com/Nblue-dev0/6851446f354867be7c884ae5f39f5be3
from webpack.
It means you have mixed default and named exports, there is a good error message how to fix it
from webpack.
Also check it https://gist.github.com/Nblue-dev0/6851446f354867be7c884ae5f39f5be3#file-webpack-config-js-L54
from webpack.
Related Issues (20)
- Implement ability to use "node:" prefixes for Node.js core modules HOT 1
- mangled exports breaks with destructuring assignment of JSON imports HOT 7
- there are confusing JDocs code
- Potential bug issues
- Webpack is not resolving node_modules specified in `resolve.modules` property.
- Dynamically loading chunks
- [Code implementation issues] ArrayQueue
- [feature] create cli HOT 3
- Not able to build node script
- bootstrap:27 Uncaught TypeError: __webpack_require__.nmd is not a function
- Self-reference dependency has unused export name when imported inside of a web worker
- support `import.meta.dirname` and `import.meta.filename` HOT 2
- <!-- identifier: admin-actions -->
- Remote into Web Component from React giving an error saying " Module does not exist in container"
- Multiple DefinePlugin instances cause aggressive cache invalidation due to collisions HOT 7
- import .scss build to js, the exported mapping is inconsistent with the usage【Urgent!!】
- Unused code elimination and deduplication is not applied when using sass's api: 'legacy' setting
- In cli, why no option named "--output-file-name" ?
- Need help with migrating a custom middleware from v3 to v5 of webpack-dev-server
- Module federation: the usage of "dynamic remotes" will cause blank screen when working with `runtimeChunk`
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack.