I can't get Tailwind to properly setup. The answers provided in this similar question all did nothing for me, so I'm not sure what I'm doing wrong.
I ran the command:
npx tailwindcss -i AD-WT-22s2-AT2-Pt1/src/tailwind-main.css -o AD-WT-22s2-AT2-Pt1/assets/css/tailwind.css --watch
and I'm fairly certain I've set the config up right.
content: [
"./src/**/*.{html,js,ts,jsx,tsx}",
"./**/*.{html,js,ts,jsx,tsx}",
"./**/*{html, js, jsx, ts, tsx}"
],
The relevant files are:
-main: tailwind-config.js
-src: tailwind-main.css (which contains #tailwind base, #tailwind components and #tailwind utilities)
-assets/css: tailwind.css
maybe you have forgotten to link Tailwind's file in your index.html:
like:
<link href="/dist/output.css" rel="stylesheet">
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Turns out there was some problems with one of the node modules and my package.json file should be in the root folder, so I deleted the node modules folder, moved the package.json file to the root, then did an npm reinstall and that did the trick
Related
I have an Angular 5 project, I have an assets folder and where I place my common CSS file and reference it in index.html, now I am planning to create another folder called "sasstyles" and I will create some .scss file there when I compile or run I want all the .scss file contained on "sasstyles" folder are compiled as .css and copied to the assets folder. how I do this in angular 5 or later
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='./assets/css/common.css' rel='stylesheet' type="text/css">
</head>
<body>
<app-root></app-root>
</body>
</html>
I have the same problem. What I found is the following.
Inside angular.json build options:
"styles": [
"src/styles.scss",
{
"input": "src/sasstyles/something.scss",
"inject": false,
"bundleName": "something"
}
]
That will create a "compiled" something.css file in the root output folder.
Unfortunately I can't find a way to put the result into assets. It seems there used to be a bug acting as a feature that let you specify it like this:
"bundleName": "assets/something"
But it no longer works (*Edit: I mean the bug/hack to specify subfolder no longer works. The basic solution does work, but puts the resulting css directly under /dist). See here: https://github.com/angular/angular-cli/issues/20360
When building a prod version of my Angular 9.0.4 app the css is bundled and added at the top of the dist/index.html like this:
<link rel="stylesheet" href="styles.6ea28d52542acb20a4c6.css"><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyTitle</title>
<base href="/">
Which I think is causing the warning in Chrome:
Resource interpreted as Stylesheet but transferred with MIME type text/html:
and the stylesheet is not rendered correctly. Note this happens only when loading the domain with subfolders e.g. www.mydomain.com/product/1
Is it possible to configure the build such that the stylesheet element is added below <base href="/"> which would possibly fix the warning?
I'm not aware of any way to move the css file import, but you can stop this error by turning off css extraction:
yarn build --extractCss=false
OR inside your build configurations in angular.json
{
...
"build": {
"configurations": {
"yourBuildName": {
...
"extractCss": false
}
}
}
}
I have a project going on, in several components, I need to put styles.
Bootstrap is working fine. But when I added style.css it does not seems to catch up.
I have checked the page source and the style.css file is linked properly to my index.html file.
my file structure:
This is the head tag of my index.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="%PUBLIC_URL%/style.css">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>News Scroller</title>
</head>
It depends, what does your Webpack create when it compiles? How are you even putting your react component into your index.html now?
It seems like those are not there yet. These few things needs to be done:
There should be a div where your react application is mounted
Your index.html shouldn't reference styles.css directly. It's usually imported in your App.js or `Index.js, depending on your naming
In the style.css file, I was writing the CSS selector incorrectly.
I wrote this before : .input-group .input-group-sm .col-md-3
which is not able to select the className.
Instead of this I replaced the "" between the classNames and the CSS rules worked.
I am using bootstrap-4 in my Vue webapp, But I am not able to customise this as is explained here.
I have my index.html which uses Bootstrap CDN, like following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sample</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="/static/custom.scss" type="text/x-scss"> ==> where I am overwriting variable
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</head>
<body>
<div id="app"></div>
<script src="/dist/client-vendor-bundle.js"></script>
<script src="/dist/client-bundle.js"></script> -->
</body>
</html>
I also tried changing the order of custom.scss and bootstrap.css in index.html as well.
Following is custom.scss, where I am overwriting variables:
$body-bg: #f5f5f5;
$body-color: #f5f5f5;
$enable-flex: true;
But this is not working.
I also tried importing this in my app component, like following:
<style lang="scss">
#import 'custom.scss';
// Following also did not work
$body-bg: #333;
$body-color: #999;
</style>
How do I overwrite these variable to customise my webapp.
You can make this a lot cleaner by using the npm package and a webpack customisation.
If you first install bootstrap in your project:
npm install bootstrap#4.0.0-alpha.5
and make sure you can use sass-loader in your components:
npm install sass-loader node-sass --save-dev
now go to your webpack config file and add a sassLoader object with the following:
sassLoader: {
includePaths: [
path.resolve(projectRoot, 'node_modules/bootstrap/scss/'),
],
},
projectRoot should just point to where you can navigate to node_packages from, in my case this is: path.resolve(__dirname, '../')
Now you can use bootstrap directly in your .vue files and webpack will compile it for you when you add the following:
<style lang="scss">
#import "bootstrap";
</style>
To customise it I'd recommend pulling in the bootstrap _variables first and then you can reference everything like normal, i.e.
#import "_variables";
// example customisation - I'd recommend importing a file here to store them all
$body-bg: $gray-dark;
// just place all your customisation work above the below import of bootstrap
#import "bootstrap";
This will mean you need to remove any CDN CSS versions or they could overwrite things, but you should now be able to fully customise bootstrap.
As another benefit this method allows you to strip out any bootstrap components you are not using. To do so rather than #import "bootstrap"; which is the entire bootstrap library, instead navigate to that file, i.e. node_modules/bootstrap/scss/bootstrap.scss and then copy across the #import's you actually want. Essentially optimising your project...
I tried following approach which worked:
cloned the bootstrap repo
modified _custom.scss in this directory.
ran npm install
ran grunt dist as is in documentation
copied generated bootstrap css and js files from here in my index.html
so my index.html has following:
<link rel="stylesheet" href="/static/bootstrap.css" type="text/css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script href="/static/bootstrap.js"></script>
As of now, I don't think customising is possible when using CDN link of bootstrap.
Here is my root HTML file. As you can see, it has no problem getting styles from Bootstrap (this functionality is working just fine). When I open up index.html in the browser at localhost:8080 (running a server through a webpack command), It cannot find the stylesheet! This is something I don't understand. Please help. Thank you.
BTW.. stylesheet.css is at the same directory level as index.html AND index.js. How come the bootstrap stylesheet is getting picked up but not my stylesheet?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="root">
</div>
</body>
</html>
Meteor automatically loads all style sheets. I've seen it recommended to put them in the /client/stylesheets, or /imports/ui/css folder.
You don't have need to put <link rel="stylesheet" href="stylesheet.css" /> . Try removing that line and see if you can see your styles applied to your page.
The reason <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> is working for you is because it is loading from an external address. It is hard-coded on your html and not being managed by meteor. I don't recommend it, but if you wanted to do the same thing with your style sheet, you would put it in the /public folder, and use <link rel="stylesheet" href="/stylesheet.css" />. But Meteor is designed to manage all the style sheets for you, so best not to do this.
Lastly, if you want to control the order style sheets are imported, you can specify import '/client/stylesheet.css'; // import CSS from absolute path - see here for clarity: https://guide.meteor.com/structure.html#intro-to-import-export