In a svelte project, I want to import some css files, and I cant make this plugin works : https://github.com/thgh/rollup-plugin-css-only
here is my config
project/rollup.config.js
/* other imports */
import css from 'rollup-plugin-css-only';
export default {
plugins: [
/* svelte here, */
css({ output: 'public/build/extra.css' }),
/*
alternatives I tried :
css(),
css({ output: 'extra.css' }),
css({ output: 'bundle.css' }),
css({ output: 'public/build/bundle.css' }),
*/
]
};
I put intentionally the output in a separate file project/public/build/extra.css instead of the default project/public/build/bundle.css to see if the file will be created; and the file is never created
I searched with find . -type f -name "*extra.css" in the project root directory
the output file is included inside the project/public/index.html :
<link rel='stylesheet' href='/build/extra.css'>
and that gives me a log with error 404, which is normal if it was not created
I tried different ways to import :
project/src/component/exemple.css
inside the component :
project/src/component/exemple.svelte
<script>
import './my_style.css';
</script>
<style>
#import './my_style.css';
</style>
<style src='./my_style.css'>
</style>
the plugin is present in the package.json, and I did npm install --save-dev rollup-plugin-css-only
ok my bad, the problem was simple : I didn't re run the npm start command, because I misconfigured my docker, so the changes in rollup.config.js couldn't take place :p
so dumb
by the way, I shouldn't include the public/build/ into the path, this will only create a nested public/build/ folder inside the public/build/ folder
and also, the output file can be bundle.css, it will add the css to the bundle.css file, no need for an extra file
finally, this wil produce a global css, not a scoped one
Related
I am trying to understand how the tailwind.config.js file works.
I have a simple index.html file with tailwinds classes, and it works! But I don't understand how is it possible, because the content attribute from the tailwind.config.js is looking inside the ./src folder for the html templates, right?
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
fontFamily: {
sans: ["Graphik", "sans-serif"],
},
extend: {
colors: {
midnight: "#121063",
},
},
},
plugins: [],
}
For some reason it reads/detect the files in the root as well (outside the src folder), is there any reason for this? Thanks.
Project stucture
node_modules
index.html
package.json
tailwind.config.js
postcss.config
vite.config
src/
css/
js/
I see you are already using postcss. Here you define input CSS file and output file. The tailwindcss config file configures other things. With commands like for example: npm run build you build your application. Here the config files give the instructions on what to do.
Of course, you then use the output css in your index.html!
You can also just build the tailwindcss output file with an npx command.
npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css
Tailwind CSS works by scanning all HTML, JavaScript, and any other template files for class names, then generating all the corresponding CSS for those styles.
Consequently, the path ./src/**/*.{html,js} you defined in content means that any directory after src that contains html and js files of any name doesn't matter , TilwindCSS checks them.
Use * to match anything except slashes and hidden files
Use ** to match zero or more directories
Use comma separate values between {} to match against a list of options
For more information, refer to the following link:
https://tailwindcss.com/docs/content-configuration
I hope I was able to solve your problem
Trying to get Tailwind to work via CLI instructions here. I've got a (simplified) file structure of
-public
-stylesheets
-styles.css
-tailwind.css
-views
-index
-index.pug
-page2.pug
-page3.pug
-user
-index.pug
-page2.pug
-includes
-templates
-header.pug
-footer.pug
I've followed the installation docs and a video on YouTube to try get it to work but when I set up tailwind.config.js with this :
module.exports = {
content: [
'/views/**/*.pug'
],
theme: {
extend: {},
},
plugins: [],
}
and try a simple test using Tailwind classes on index/index.pug like this :
extends ../index/layout
block content
h1.text-3xl
| Hello world!
and run npx tailwindcss -i ./public/stylesheets/tailwind.css -o ./public/stylesheets/styles.css --watch
I'm just getting a completely unformatted H1 on the frontend and a terminal warning of warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.. What am I doing wrong?
In your Tailwind config file, your template path is listed as '/views/**/*.pug'.
The specified path starts at the root of your filesystem and not relative to the folder you're running the command from.
Update the path to './views/**/*.pug'
I use Electron Forge for an Electron app. I also make use of React and TypeScript, and I would also like to use SASS, but my current attempts fail. Apparently SASS already works without adding any new dependency to the package.json, as electron-compile takes care of that. That's what it sais on electronforge.io under Develop.
I tried adding the style.scss as an import within the first TypeScript class app.tsx, but after adding this compiling does not work anymore:
import "./style/style.scss";
leads to:
[24717:0221/194746.779571:ERROR:CONSOLE(7830)] "Extension server error: Object not found: <top>", source: chrome-devtools://devtools/bundled/shell.js (7830)
I also tried to put a link element into the head element in the index.html, but this does not do the trick either. Compiling works, but no CSS works are done:
<link rel="stylesheet" href="style/style.scss">
also tried:
<link rel="stylesheet" type="text/css" href="style/style.scss">
and:
<link rel="stylesheet" type="text/scss" href="style/style.scss">
and:
<link rel="stylesheet" type="text/sass" href="style/style.scss">
The 'style.scss` file:
body {
background-color: #ff0000;
color: #0000ff;
}
But none of them work. What must I do to make use of SASS files within Electron Forge?
I've managed to get this working, little bit late but hopefully this helps someone in the future. On an example app using webpack (as I'm pretty sure this is required), Electron Forge generates some js files in the root directory for webpack config.
yarn create electron-app my-new-app --template=webpack
or
yarn create electron-app my-new-app --template=typescript,webpack
https://www.electronforge.io/templates/typescript-+-webpack-template
Following this, there's two files in the project root, webpack.rules.js and webpack.plugins.main.config.js. These need to be modified to work properly, and you need to install sass-loader as a dev dependency. node-sass was recently deprecated so sass-loader will handle that okay.
Your webpack.plugins.main.config.js file should include:
module: {
rules: require("./webpack.rules"),
},
resolve: {
extensions: [
".js",
".ts",
".jsx",
".tsx",
".css",
".json",
".scss",
".sass",
],
},
Additionally, your webpack.rules.js file should have a new rule added:
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
This is what's provided in the documentation on the page for sass-loader, properly implemented into electron forge. https://www.npmjs.com/package/sass-loader
Finally, your renderer.js (or renderer.js) should be adapted to import a scss file rather than a css file.
import './index.scss';
From there, you should be good to go!
You need to compile the SASS file to generate a CSS file and then put it in the index.html
Yo can use the console to try it
# Path to SASS File > OUTPUT path to CSS File
sass style/sass/style.scss style/style.css
then, import the file in the head
<link rel="stylesheet" href="style/style.css">
I am trying to import the .css from full-calendar package.
First, I created a new component my-calendar (html, scss, ts).
Then, I tried 3 different ways but only the last one worked for me:
Reference the file directly, as the documentation suggested, in the index.html (it does not work because the reference to node_modules is lost when you build the project)
<link href="node_modules/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">
Adding #import "~fullcalendar/dist/fullcalendar.min.css"; in my-calendar.scss. If I am not wrong, this should add the style into main.css when the project is being built (is not working)
Create custom copy config (copy.config.js)
module.exports = {
...
copyFullCalendar: {
src: ['{{ROOT}}/node_modules/fullcalendar/dist/fullcalendar.min.css'],
dest: '{{BUILD}}'
}
}
and adding #import "fullcalendar.min.css"; into my-calendar.scss
UPDATE:
and adding #import "fullcalendar"; into my-calendar.scss
to avoid compiler errors when use ionic build --aot --minifycss --minifyjs
I would appreciate if someone could clarify the best way and explain if I misunderstood some concept.
PS: Remember that I am working with Ionic3 and I am not using the Angular CLI.
third method of yours will be the best way to implement , but it can be done in another way more like ionic.
You need to make use of the includePaths when configuring the custom path , as we are dealing with custom css, add sass.config.js to local project folder where we configure custom includePaths like this
includePaths: [
....
'node_modules/ap-angular2-fullcalendar'
],
In package.json scripts to include custom css configuration file, like this:
"scripts": {
.....
"ionic:serve": "ionic-app-scripts serve -s ./config/sass.config.js"
},
Only problem with this implementation is when you update ionic-app-scripts you have to compare the native sass.config.js file to the local file and check if there is anything changed.
This is a troublesome method and an issue was raised in Github but unfortunately they closed the issue with the following justification
Configs are extended, so only include the fields that you're changing.
Everything else will inherit the defaults.
As of #ionic/app-scripts : 3.2.0, it seems you'll still need to
#include FILE; somewhere
See this closed issue on app script's github
I found that as of
'Ionic Framework : ionic-angular 3.9.2'
you have two choices insert your import in src/theme/variables.scss or src/app/app.scss.
For example in variables.scss
/* some declarations here */
#import 'insrctest';/*file sits in src/test/insrctest.scss*/
And in my custom.config.js
includePaths: [
'node_modules/ionic-angular/themes',
'node_modules/ionicons/dist/scss',
'node_modules/ionic-angular/fonts',
'./src/test', /* when the import above gets called, node-sass will look in here */
I've installed a new library with npm, so far so good. Now I want to import the css in there to my project, obviously I shouldn't link directly to the node_modules folder. So, is there a simple to do import this to my project? I'm using Angular CLI.
I have an idea, but I'm not sure if it's a good idea - I thought about installing gulp/grunt and then require the style there and output it as vendor.css into my project. Is it even possible?
First go to your angular-cli-build.js file and add an entry in the vendorNPMFiles array. This will copy your node_modules files to the /vendor directory during the build. Now you can reference your css in your index.html as /vendor/folder/file.css.
Eg: angular-cli-build.js
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'#angular/**/*.+(js|js.map)',
'bootstrap/dist/**/*.*',
'lodash/lodash.min.js'
]
});
};
index.html snippet
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">