I have a set of scss file that I package as a library for reuse in several other web applications. I am aware that in my package.son for js files, I can specify the entry point in main property. Not sure how to specify this for scss file libraries. I have a main.scss that includes all the scss files that I developed and that imports the thirdparty sass files that need. I looked up how bootstrap the scss files and found that they don't really mention the main stylesheet in the package.json.
Do I need to define the main property in the package.json or leave it documented on how the scss files need to be resolved from node_modules?
If you're using node-sass (or something that depends on node-sass) to compile your sass then you can use sass-module-importer to import your own main.scss.
In your repository with your main.scss file you just need to set the "style" or "main" property in your package.json to point to your main.scss file (example here: https://github.com/bameyrick/sass-helpers/blob/master/package.json).
If the third party scripts you import into your main.scss file do not have a style or main property in their package.json, then the imports in your main.scss file will need to point to that file from the node_modules folder (e.g. #import './node_modules/third-party-lib/src/index.scss') because sass-module-importer will not be able to resolve that dependency for you.
Related
I'm currently building an npm component library and i'm using a rollup bundling process to compile the library for distribution. The css for the project is written using SCSS, but it also depends on Bulma, which is a css framework written in SASS.
What I would like is to be able to bundle the bulma source code along with my custom scss all into one scss file that I can then use in other projects. That way I can still benefit from the features offered by scss in those projects, such as variables and mixins for example.
I would like this to be automated during the build process so that I don't have to worry about it while developing new components. I've looked at many npm packages for bundling scss files but none of them support SASS and SCSS together. I've also tried converting my project entirely to sass but there doesn't seem to be any good support for sass bundling in general.
So for example, I may have a main.scss file that looks something like this:
#import "~bulma/bulma.sass";
#import "./utils/variables.scss";
It imports both sass and scss files together. This is something that is supported by the sass compiler, and I can compile this to a bundled css file without any issues. But there does not seem to be any support for bundling into one scss file.
The two main NPM packages that i've been attempting to use are:
scss-bundle & bundle-scss
scss-bundle is great, but it doesn't seem to have SASS support, so that's a no-go with Bulma.
As for bundle-scss I converted my project to use SASS and configured the package accordingly, here's the config is used:
{
"dest": "dist/bundle.sass",
"mask": ["src/styles/**/*.sass", "node_modules/bulma/**/*.sass"]
}
From what I can tell, this should go through all of the files in all of the subdirectories of both my styles folder and the Bulma dependency folder and compile them together into one bundle.sass file. And although I would prefer the configuration options from scss-bundle, this is essentially what I am looking for.
However it doesn't work. The package can't seem to resolve the #import statements within the SASS files. Regardless of the syntax I use. And even if it was based on syntax, I can't change Bulma's syntax. Could it be that I'm using the wrong globbing pattern in the mask option? Or does this package just not work?
So my question is, and TLDR:
Can I bundle SASS and SCSS together into one file using some NPM package?
If not, is there a simple and automated way for me to transpile SASS to SCSS and then bundle them together?
If neither of those are possible, is there a working npm SASS bundler that someone can direct me towards? Because bundle-scss does not seem to work.
Also, I am aware that I could just import Bulma separately into the project that needs it, but i'd really prefer to have it all come down together in one package.
Thanks! I hope I explained everything clearly!
Since version 4.x of SonataAdminBundle all assets are handled using NPM and WebPack.
In my project I also have some assets and JS libraries and I'm also using NPM and WebPack.
What should I do in this case? For example, SonataAdminBundle uses libraries such as jQuery, Bootstrap, but I also use them (in my package.json).
One of the ideas that came to my mind is to import the main "app.js" file (vendor/sonata-project/admin-bundle/assets/js/app.js) from SonataAdminBundle which contains all the required components to run to my main "app.js" file and then import my other additional libraries and assets. Next, I would then copy all the dependencies from the SonataAdminBundle package.json file (vendor/sonata-project/admin-bundle/package.json) and paste it into my package.json file.
I am not sure if this approach is correct.
The downside of this solution would be to compare the package.json files after each update of the SonataAdminBundle library and apply any changes.
Do you have other ideas to solve this problem?
I am using laravel5.4 with vuejs2 to build a small project. I have just started learning vuejs2 with laravel. Using laravel-mix to compile my assets. In laravel-mix documentation i can't seem to find a way to add my own plain css file to be merged and watched.
I have my own css rules in public/css/custome.css file. what should i write in the webpack.mix.js file so that my this file is included and watched by laravel mix? Currently i have below lines in the file:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Move your custom CSS file into resources/css folder and write the configuration below in webpack.mix.js
Note: You probably won't have a css folder in resources, so just create one.
mix.styles([
'resources/css/custom.css'
], 'public/css')
I found a solution on Laracast and it worked for me.
Here are the steps :
Save the content of public/css/custome.css in resources/assets/sass/_custome.scss
You have to change the file extension to .scss and add an underscore at the beginning.
The underscore will be useful when importing in your main app.scss file.
Import your resources/assets/sass/_custome.scss file into your resources/assets/sass/app.scss this way :
/* importing _custome.scss from the same directory containing the following files
resources/assets/sass/{app.scss, _custome.scss, _variables.scss} */
// import _custome.scss
#import "custome";
// import _variables.scss (custom variables for bootstrap-sass)
#import "variables";
// importing bootstrap-sass from node modules (if you are using bootstrap)
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
Include this in your webpack.mix.js file
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Compile with
npm run dev
That's all.
I'm trying to include some CSS in my create-react-app project. The CSS is from a 3rd party NPM package and therefore its in the node_modules directory.
I tried:
import '/node_modules/packagename/css/styles.css';
But I get the error:
Module not found: You attempted to import /node_modules/packagename/css/styles.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.
I would prefer to not move the CSS to src/ so it can be updated via NPM. I could symlink but as I develop on windows and deploy to linux this isn't ideal.
What's the best way from me to include the CSS?
Find the path of the css file
example: ./node_modules/packagename/dist/css/styles.css
Import using the path related to node_modules (anything after node_modules/ )
import 'packagename/dist/css/styles.css'
relative paths are unnecessary from node_modules and should not be the recommended way to include the css
all you have to do is leave off the preceding slash and node_modules directory same as importing a js package from node modules:
import 'package/css/style-to-import.css'
when using (s)css imports, use the tilde (~) to indicate an absolute import:
#import '~package/css/style-to-import.css'
A distinction not made from the previous answers is it depends on where you're importing the CSS into; a component or into a stylesheet.
If you're importing a node_modules stylesheet into a component, you don't need a relative path like mentioned above.
import 'packagename/dist/css/styles.css'
However, if you're importing a node_modules stylesheet into a CSS/SCSS file, you need to use tilde ~.
#import '~packagename/dist/css/styles.css'
I found this a bug of a pain. specially my webpack.config.js is not running anymore.
specially react app is now running in src folder and the import files need to be in the public folder.
i was using materialize-social and found out the easiest way is to move node_module file folder "materialize-social" to the public directory any other way please commend it down.
The documentation for Bootstrap's node package says to simply add #import "bootstrap"; to my scss file to include Bootstrap's scss.
When writing my own node package, how do I get this functionality?
For instance, I have a package called foobar. How can I set it up so that it will know where to grab my package's scss simply by putting #import "foo"; in my main scss file?
If the name of your main SCSS file is foo.scss, it works. Check here for more information: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import