I am using rollup as my module builder and Typescript in my source. Now, I need to define some CSS files for my module.
On importing my CSS file to the .ts file I get the following error
Cannot find module './styles.css'.
How do I generate typings for my CSS files?
I came across an npm package typed-css-modules to generate the typings. I tried using it but again my CSS classes do not get exported to my .ts file.
Anyways, I found the solution to my problem.
I am now using this package to generate Typings
rollup-plugin-postcss-modules
Related
So I downloaded a package from NPM its called react-csv-importer. My React app is using scss to customize layouts. I am coding from a react-bootstrap template I purchased from react-bootstrap.
Their layout is confusing me and I cant seem to understand how to customize an NPM package I install...
Here is a photo of the index.css file that contains everything I need to edit
Here is a screenshot of the layout of the SCSS
Here is another screenshot inside the theme folder, It contains most of the scss files
Now shouldnt I just be able to create a new file called something like csv-importer.scss and then copy the code from index.css thats located in the NPM package and update it in the SCSS? How do people go about editing an NPM install this way?
You should never customize or touch a package you've installed through npm. If you change the package in node_modules then 1. it will get overwritten as soon as you do npm install again, 2. it won't be saved to your github since you need to exclude node_modules with .gitignore. node_module packages should be left alone, untouched.
Instead you should import the things you need to use from packages and use it in your own code. So if you have a package called "example" that you've installed through npm then you need to do:
import Something from 'example'
// use Something here
In order to use it. This is how you use stuff from node_modules.
In your case you should likely import the styles from the package you've installed, either through scss #import or through node import, after which you can use it in your own code. However you should not modify the original code they have.
If the package they have is .css then you can't change that to .scss, you'll just have to use it as .css. Which is not such a big deal since scss will get compiled to css anyways.
What you can do is to import all of their styles through #import and then to overwrite the things you want in your own code or scss.
I installed Bootstrap CSS with SASS from the following repo:
https://github.com/twbs/bootstrap-sass
I ran the command "bower install bootstrap-sass" on the command line and this successfully installed the folder bower_components on my project folder. (Incidentally - I have nothing else present yet, I want to learn to bootstrap the CSS compiling first).
OK, here's what I want to accomplish:
I want to be able to add .scss files to the folder I create called resources/assets/sass/
I want to provision/manage so that .scss files I add to this directory are in turn compiled to public/build/css/that_file_name.css
More practically, I would like to compile all of the .scss files into one large .css file.
My question(s) are:
What does the compiling?
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
What does the compiling?
Compiling Sass files transforms stylesheets with Sass-specific syntax like selector nesting and mixins into normal CSS that can be parsed by browsers.
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Since you're already using Bower which is a Node.js package, I assume that you have no problem using the Node.js package node-sass instead of the original Ruby version.
First, install the package using npm i -D node-sass. Then, create a new script inside your project's package.json:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"
main.scss is now your entry point where you import Bootstrap and your other stylesheets.
// I don't know whether this path is correct
// Just find out the location of "_bootstrap.scss" and then create the relative path
#import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
/* Your custom SCSS */
Finally, to actually run the compilation, execute npm run compile-sass in your terminal.
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Since you never tell node-sass to "compile everything inside this folder" and instead use an entry point file (main.js), when you want to include a new file you simply add an #import directive with a relative path to it.
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
To minify the resulting main.css file, I recommend csso. You can install its CLI package using npm i -D csso-cli and then add another script to your package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"
You can then run that script using npm run minify-css. The minified file will be outputted as main.min.css.
For all the question asked, the answer can be found above. But if you are just looking to compile .scss file to .css using command line, use below,
sass source/stylesheets/index.scss build/stylesheets/index.css
Make sure you have "node JS/npm" and Sass compiler installed.
If not, use this to install Node.js and npm - https://www.npmjs.com/get-npm
And use this to install Sass - https://sass-lang.com/install
Enjoy ;)
I attempting at using the react-draft-wysiwyg npm (https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp). I get a
/Users/timurozkul/Documents/Repo/Others/blog/Blog/pre_app/node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css:1
SyntaxError: Unexpected token .
When I follow the method on the documentation as below
How do I import css files into JSX files without web pack?
I have copy pasted the css styles from the npm into my own stylesheets. Which solved my issue. My best guess is that it is possible with Webpack and not without it because of formatting.
For example, I want to use Slider Pro in my meteor project as an npm package without having to create an Atmosphere package out of it, however the docs (https://github.com/bqworks/slider-pro) say to include files in <head>. See Image Snippet of Docs. How would I do that?
There are a few ways you could do this. Either way you choose you still need to add it as an npm package through Meteor:
meteor npm install --save slider-pro
And then what I commonly do, is create a file inside imports/startup/client directory called vendor.js, and just use this code in the vendor.js file:
import '../../../node_modules/slider-pro/dist/js/jquery.sliderPro.js';
import '../../../node_modules/slider-pro/dist/css/slider-pro.css';
Then in the file located at imports/startup/index.js just add this to include that vendor.js file:
import './vendor.js';
You just need to make sure that the path is correct, in the vendor.js file, as you can see, since my vendor.js file is nested 3 directories deeper than the node_modules directory, all files have to be prepended with ../../../ which basically means "go back three directories"
I've got a Meteor project with the following file structure:
.meteor
client
dashboard
dashboard.scss
client.scss
My basic sass file is client.scss that resides in client folder.
If I define $flat-button in client.scss. Then I cannot use it in dashboard.css without adding import '../client';. However when I do this in multiple files this causes duplicate entries in the unified css file. If I don't import it then Meteor reports errors due to not finding the variable.
Should I add settings to the sass compiler to get this working?
If you're using the fourseven:scss package to compile the Sass in your Meteor project, you simply need to prefix the filenames of your imported .scss files with an underscore, which is the standard method of naming a partial stylesheet with Sass.
In your case, your folder and file structure should be changed to:
.meteor
client
dashboard
_dashboard.scss
client.scss
And then you should be able to use an #import statement to include _dashboard.scss in client.scss like so:
#import 'dashboard'
If for some reason you don't want to rename your files that way, you can also use the .scssimport extension for the same result.
Hope that helps!