I have NextJs project with following structure
-pages
-_app.tsx
-app
-styles
-antdstyles.less
inside _app.tsx i am trying to load import '#styles/andstyles.less which simply imports antd styles ass this #import '~antd/dist/antd.less';
However i get error saying
/app/styles/antdstyles.less
#import '~antd/dist/antd.less';
^
'~antd/dist/antd.less' wasn't found. Tried - /home/computer/job/proj/app/styles/~antd/dist/antd.less,/home/computer/job/proj/css/~antd/dist/antd.less,/home/computer/job/proj/~antd/dist/antd.less,~antd/dist/antd.less
you have to use less loader and config it in next.config.js of your project. it's not supported to use less in next app out of the box.
Related
In a NextJS project that uses TailwindCSS, I have a global css file, index.css and I'm trying to import another file.pcss into the global css file. But, NextJS can't seem to find file.pcss, produces the error below:
Error: Can't resolve 'file.pcss' in '/home/chris/repo/styles'
index.css has:
#import 'file.pcss';
Not sure why this is happening because Next + Tailwind should support PostCSS without issue.
Figured it out!
When I converted both files to .scss files. Everything started working again.
Result:
global css file renamed to: index.scss
#import 'file.scss';
pcss file renamed to: file.scss
Solution came from: https://github.com/vercel/next-plugins/issues/565#issuecomment-561086895
I am working on an angular design library based on bootstrap, similar to ng-bootstrap
I currently created multiples modules for each design component that can be imported separately based on user needs.
ex :
src/
modules/
inputs/
buttons/
navs/
tooltips/
....
Each module can be imported independently and used in application.
The problem I face is with bootstrap scss. Has explained here we can import all bootstrap with
#import "../node_modules/bootstrap/scss/bootstrap";
or by chunk
#import "../node_modules/bootstrap/scss/root";
#import "../node_modules/bootstrap/scss/reboot";
#import "../node_modules/bootstrap/scss/type";
#import "../node_modules/bootstrap/scss/images";
#import "../node_modules/bootstrap/scss/containers";
#import "../node_modules/bootstrap/scss/grid";
I would like each of my modules to import their specific scss files. The table would import the tables scss, the navs the navs etc...
Since bootstrap files are scss they need to be compiled before added to the page, and the easy solution of manually adding in each module a stylesheet element would not work.
In ng-bootstrap they require users to manually add each bootstrap scss that they wish to use, but this could be kind of a pain for users since they need to manually add a module and the associated styles.
Are there any solution to bind a scss file to a module, and compile it if that module is used in the app ?
I would follow in the footsteps of Angular Material's implementation and provide users of your library instructions on how to include the design library styles default styles or custom styles. Take a look at Angular Materials build code and the corresponding exported assets made available as an NPM package. Essentially to manually import a single SCSS file per module that is imported as described above a user would need to take the following steps and understand the styles will be applied globally. There is no dynamic inclusion and compilation of SCSS in Angular upon loading of a module the chunks under the hood would need to be recompiled and the styles would be preprocessed again.
In angular.json under the "build.options" object modify "styles" and "stylePreprocessorOptions" and update the configuration to point to the new global styles directory "entry" such as "styles":["src/styles/styles.scss"], "stylePreprocessorOptions": { "includePaths": [ "styles" ] } then in styles.scss import your bootstrap scss. Under the styles directory you can now create a custom directory structure and the angular compiler will be able to find everything imported in the global "styles.scss" file. Further reading: read about the shadow DOM in Angular in the context of styles applied based on view encapsulation for component scoped styles vs. globally applied styles.
I've uploaded a React project to CodeSandbox locally using the codesandbox ./ terminal command.
CodeSandbox project link here.
In the pane to view the project it's throwing the error, "PostCSS received undefined instead of CSS string". Because of this I am unable to view the project in the browser.
It's highlighting the first two lines of my code in my 'variables.scss' file as errors:
$light-primary: #fdebeb;
$light-grey: #f1f3f6;
Why is this happening?
What i would suggest you to do is have a main.scss - which will contain imports of other scss files, by doing this i was able to resolve the error -
// variables
#import "./variables";
// other
#import "./general";
#import "./typography";
Now import this in your App.js. - https://codesandbox.io/s/nce-forked-jh4py
is there a mechanism in the react ecosystem to import sass files only when a component is loaded? For example, I may have the following structure:
client/
main.scss
routes.jsx
main.html
imports/
components/
componentA/
ComponentA.jsx
ComponentA.scss
componentB/
ComponentB.jsx
ComponentB.scss
Let's say ComponentA is used only in the public area while ComponentB is used only in the admin area. If I #import both component stylesheets into the main.scss file, the public will be downloading extra data they will never use. Is there any solution to this problem in the sass world?
Since you are using meteor this is what you can do, use import in your jsx file
In your ComponentA.jsx file use:
/imports/components/componentA/ComponentA.scss
If you want to get the scss file only if you are rendering the component, then you can do a require of this file in the render method instead of using import in the file.
Here is the link :
https://guide.meteor.com/build-tool.html#css-importing
Under my app/assets/stylesheets I created a folder components because I like to create styles specific to each one of my html components. This way in my actual sass file (some_page.scss) I can just do a few imports depending on what I need.
for a visual, here's what the folder structure looks like now:
- app
- assets
- stylesheets
- components
_component1.scss
_component2.scss
application.css
page-specific.scss
right now under components I have
_colors.scss // declaring colors for my app
_other_stuff.scss // other stuff...
usually when doing imports, I import colors first so that I can use them in the rest of my components. But rails is complaining:
Showing /Users/abdulahmad/Desktop/rails/password-service/app/views/layouts/application.html.erb where line #5 raised:
Undefined variable: "$green".
am I supposed to do something special to tell rails that I want my sass compiled in the components folder? or is this error being thrown for another reason?
by the way, here are the contents of my page-specific scss file:
#import 'components/colors';
#import 'components/inputs';
Rename your application.css to application.css.scss
And then application.css.scss file has to be like below.
#import "components/*";
#import "page-specific";