The idea is simple. I have npm package which is using Rollup and it has some sass variables and mixins. And I need to provide them with the package, so in projects which are using my package the users could just:
SomeProject/styles/main.sass:
#import '~my-lib/dist/sass/mixins` // or something like this
.custom-class
// some stuff
#mixin-from-my-lib
So, in order to make this work I have to put my mixins.sass in the dist somehow. And I don't have any ideas.
It's probably a couple of lines in rollup.config.js, but I just can't find anything related to this. :(
Related
We have a Vue component library built with Rollup. The development is in early stage but everything worked well so far besides this one thing: we are not able to export SASS variables from a scss file and import them in a js file. We are used to do it using the :export statement of Webpack sass-loader. Something like this:
breakpoint.scss
#import './unit.scss';
$breakpoint-mobile: 360px;
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1200px;
:export {
mobile: strip-unit($breakpoint-mobile);
tablet: strip-unit($breakpoint-tablet);
desktop: strip-unit($breakpoint-desktop);
}
then in any js file, we could import the stylesheet import breakpoints from '#/styles/settings/breakpoints.scss' where breakpoints will be equal to { mobile: '360', tablet: '768', desktop: '1200' }.
So it works fine with Webpack, but I can't get it working with Rollup using rollup-plugin-styles without additional config (I also tried rollup-plugin-postcss, same result). I also can't find anything on Google related to that issue...
This is the result of breakpoints.scss compiled by Rollup:
import n from '../../node_modules/rollup-plugin-styles/dist/runtime/inject-css.js';
var css = ":export{mobile:360;tablet:768;desktop:1200;}";
n(css,{});
export default css;
export { css };
//# sourceMappingURL=breakpoints.scss.js.map
So it seems like it wants to inject the styles which makes sense, but still not the behavior I want. Is it already possible to achieve what I'm looking for or I need to contribute to rollup-plugin-styles to add the support?
Update: it looks like this is supported, please see the answer provided by pmrotule.
Old answer:
The feature you are referring to is Interoperable CSS (ICSS).
As you have stated, the popular css-loader for webpack-based projects supports it.
As far as I can tell rollup-plugin-styles does currently not support Interoperable CSS. This is one of the reasons I still use webpack for my projects.
There is an open issue for this feature.
Contributing to the project and adding support for ICSS is a great idea, but expect some discussion about how the configuration will look like.
I just realized that if I use the option modules: true of rollup-plugin-styles, I get the behavior I was looking for... More details in the README.
I am setting up a Snowpack project with the aim to move an existing Create-React-App application into it once things are configured the same.
I haven't found a way to import an .scss file into a .tsx file however.
The Snowpack docs only seem to discuss configuring scss as an externally built asset, suggesting putting your scss into a separate css folder { docs link }. However I would like to keep my scss files next to the tsx components they belong to, and import them into the component as I currently am.
The docs also reference a blog post discussing a setup with PostCSS, however that post suggests some issues with the approach, including that sourcemaps wouldn't work - which isn't going to fly.
I have created my project like this:
npx create-snowpack-app my-sweet-app --template #snowpack/app-template-react-typescript --use-yarn
I've then added a new scss file, src/test.scss
$best-colour: tomato;
body {
background-color: $best-colour;
}
and added an import in my src/App.tsx file:
import './test.scss';
When running yarn start I get the following error:
[error] [404] /_dist_/test.css.proxy.js
✘ /home/me/repos/my-sweet-app/public/_dist_/test.css
✘ /home/me/repos/my-sweet-app/src/test.css
Can Snowpack be configured to import scss files into tsx files equivalent to how it works in Create React App? How?
While I have not a complete answer, I faced the same problem as you. What you basically want to achieve is, to add additional tools to Snowpack's build pipeline.
If you throw in Babel with Snowpack you can add arbitrary absurd babel plugins for all your transformation needs.
Using #researchgate/babel-plugin-transform-scss-import-to-string and adding it in my babel.config.js I was able to get my Sassy stuff transpiled into strings.
However, this is not a complete solution; because now Snowpack won't pick up changes in my Sass files... :( It seem's that a lot of those new anti bundlers are just that, they are against bundling and thus combining them with additional pre-processing stuff that used to be done by our good olde bundlers is cumbersome.
I'm trying to learn more about package development by using Laravel Nova as a bit of a guide. I'm confused as to how Nova's assets are compiled, and part of that confusion stems from Nova not having a webpack.mix.js but instead a webpack.mix.js.dist.
I'm trying to model this within my package in order to compile and publish my assets for use in my project, but I get npm errors when trying to run any command
Cannot find module 'dir/dir/dir/package/webpack.mix'
I'm unsure as to why it is looking for this file in the first place, but it still seems to be an issue. To get to the root of why this is an issue and how I can fix this, I'd like to know what the difference between webpack.mix.js and webpack.mix.js.dist is.
Any feedback on this would be greatly appreciated. Thank you.
Files that end in '.dist' are generally the default distribution files that come from the package and should not be edited. They will be overwritten on package updates.
You can use them as a reference to add or replace configuration in your primary file(s).
From what I can gather, Laravel Nova creates it's real webpack.mix.js from this file when you activate a certain feature. (It's a paid product, I do not have a license to see it, I can only skim the documents.)
i wonder if there is some CDN converter, which will convert my scss to css. I need to write some simple mockup project (SASS is required here) and don't want to prepare gulp or webpack for it. Also i have to avoide all websites like codepen etc.
Do you know something like this? Maybe there is something else, what will allow me using SASS files direct in my project.
Cheers,
Daniel
What do you need is an Online Converter, if I correctly understood.
Take a look at sites like Sassmeister or online SCSS or SASS compilers.
If you don't want to depend in your connection, you can do this if you have ruby installed.
gem install sass
sass --update scss:css
Then your SCSS will be compiled CSS
The problem I am encountering a great number of imported files. I am trying to slowly inject webpack into a legacy site. There are many global stylesheets:
require('../../../Content/Ones/_forms.scss');
require('../../../Content/Ones/_grid.scss');
require('../../../Content/Ones/_panels.scss');
require('../../../Content/Ones/one.scss');
require('../../../Content/Ones/_grid_tools.scss');
Is there a way to avoid this? I might be just looking at this from the wrong angle because I can't seem to find a question that matches my use case.
Please advise, Thanks!
The SASS files you import (whether you import them from a JS file or another SASS file) are part of your webpack dependency tree, so they should all be watched automatically. If they're not, would you mind adding some more info to your question about your app structure and webpack config?
As for reducing the number of global SASS imports, there are a few ways to do that, but making a good choice here really depends on how your app is structured.
Side question: Is there a reason you're adding webpack to this site? Anything in particular you're hoping to gain? I ask because if it's not a component-based SPA, you might not be getting very much out of webpack, and it may not be worth the trouble.