Normally I use
{ test: /\.sass$/, loader: 'style!css!sass?indentedSyntax' }
and then in main.js
require('./styles.sass')
But it applies style using javascript when main.js is loaded. The problem is that my app us isomorphic and returns some html initially. Because I load main.js just before </body> tag, then styles are applied to document a bit too late (user sees not-styled HTML for a moment).
Therefore I would like to generate regular css file from styles.sass and then simply include id in <head></head> to make sure it is loaded initially. How I can generate regular css file?
I tried:
entry: {
styles: path.resolve(__dirname, 'app/styles.sass')
}
but it generates styles.js instead of .css file. Moreover if I include styles.js in a head then I get following error in console from styles.js:
Uncaught ReferenceError: webpackJsonp is not defined
Use the extract text plugin.
Put this in your loaders:
{ test: /\.scss$/, loader: ExtractTextPlugin.extract("css!sass") }
...and in your plugins:
plugins: [
new ExtractTextPlugin("styles.css")
]
Adapted from...
http://webpack.github.io/docs/stylesheets.html#separate-css-bundle
When I use Sass in my projects, I in most cases use the same file structure. At least when it comes to the css-folder.
├── index.html
├── /css
│ ├── style.css
│ ├── /sass
│ ├───── style.scss
│ ├───── ...
In the public folder where I tend to put my js, css and images folder, I always make a batch file. Something like this:
cd "`dirname "$0"`"
sudo sass --watch css/sass:css
This works for all my projects. I just run it and minimize the window. This looks for changes and converts Sass to regular css to the style.cssfile. Then in my index.html I just include css/style.css.
Hope this helps you
Related
I have installed modern-normalize in my project, and from a sass file I'm trying to include it's css file like so:
#use '~modern-normalize/modern-normalize' as *;
I keep getting this however:
Error: Can't find stylesheet to import. ╷ 9 │ #use
'~modern-normalize/modern-normalize' as *; │
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Even though in my IDE (vscode) I can CMD+Click on this and it navigates and opens the file just fine, I see in my node_modules dir
Am I missing something config related perhaps?
Your path looks odd, the tilde ~ prefix start of the path tells used to css-loader to resolve the import "like a module", starting from the node_modules directory.
However Angular has deprecated the use of ~ for Sass #use and #import statements.
Tilde imports have been deprecated in the Sass loader for a long time
and they won't work with the new package format in v13. These changes
add a migration that will drop the tilde.
See https://github.com/angular/components/commit/f2ff9e31425f0e395e6926bcaf48f876688000d8
So try removing it. e.g.
#use 'modern-normalize/modern-normalize' as *;
Angular has removed tilde support for sass loader. Do this in angular.json for your application to add relative path to node modules
"stylePreprocessorOptions": {
"includePaths": [
"./node_modules"
]
}
Then remove ~ from your import paths.
Alternatively, you can use absolute path for import such as below, construct path to node_modules, you might need to check correct path for your file.
use '../../node_modules/modern-normalize/modern-normalize' as *;
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
I've installed tailwind using npm install tailwindcss
I then create my src/style.css file and include
`#tailwind base;`
`#tailwind components;`
`#tailwind utilities;`
When I run my build-css command I get a generated output.css file, but the file is only 425 lines long. It looks likes it's missing the components and the utilities. When I link my HTML to the output.css I get the base tailwind css styles applied, but utilities have absolutely no effect. I have followed the docs to the best of my ability as well as several tutorials with the same result every time. No clue what I am I doing wrong, the tuts I have watched show this file to be thousands of lines of code while mine is always 425.
You need to add a config js file for the tailwind engine, inside the config file use content attribute to define where is your HTML or JS files, the new engine automatically looks inside these files and compiles only the classes that you used.
Check this video for more information:https://youtu.be/mSC6GwizOag?t=22
If you believe you have set everything up properly, check that the structure of the project directory is correct:
project_directory/
|
|--- tailwind.config.js
|
|--- dist/
| |
| |--- output.css
|
|--- src/
|
|--- input.css
|
|--- index.html
|
|--- main.js
References
Cannot use tailwind classes
try this :
npx tailwindcss-cli#latest build ./src/styles.css -o ./public/styles.css
ps: the styles.css in the public folder is the output.css
It was my config file, I wasn't point to my source file correctly. Fixed this by coping the documentation's example and file structure. content: ["./src/**/*.{html,js}"], was what I needed to add to the tailwind.config.js
In my case, I had spaces in the file extensions that cause my problem
module.exports = {
content: ['./app/**/*.{js,ts,jsx,tsx}'],
//wrong content: ['./app/**/*.{js, ts, jsx, tsx}'],
theme: {
extend: {},
},
plugins: [],
};
In my Webpack configuration I'm defining one resource root for common files like this:
{
loader: 'sass-loader',
options: {
includePaths: [
'node_modules',
'src/components/_common'
]
}
}
Now I'm having e.g. a file _fonts.scss in the resource root and can import it using #import "fonts";. This is working like a charm.
However, if this file contains a #font-face directive that is written relative to src/components/_common (path like in the Webpack configuration above) the file loading of that font url won't work. Webpack isn't able to resolve this URL as it assumes that it's written based on the path of the actual file which imports _fonts.scss, which is not src/components/_common.
So, my question is: Would it be possible that I write the path absolute from the beginning of the project, so that Webpack can always resolve it as it's no longer relative? I've tried it with no luck. Also I've tried specifying resolve.modules and resolve.alias with no luck too.
To solve this issue, it's only necessary to use the resolve-url-loader:
https://github.com/bholloway/resolve-url-loader
Keep in mind that it's currently necessary to have sourceMap enabled on any previous loader. It's just that easy.
I am using Webpack 2 and webpack-dev-server together with Sass loader, actual configuration:
{
test: /\.scss/,
loaders: [
"style",
{ loader: "css", query: { modules: false, sourceMap: true } },
{ loader: "resolve-url" },
{ loader: "sass", query: { sourceMap: true } }
]
}
This works quite well and the image referenced in background: url() is processed by webpack and also replaced in the style for something like background-somehash.jpg, this file can be accessed by typing http://localhost:8080/background-somehash.jpg. It also works when I provide whole url (including localhost) in a style background definition using developer tools...
The only thing that don't work is the original css produced by webpack which looks like background: url(background-somehash.jpg). I also tried various urls like ./, ../, ../../ or ./images/ to try out if root was set somehow differently. What I don't get is that the file is readily available at the root...
EDIT:
When used together with extract-text-webpack-plugin which extracts styles into separate real styles.css file it works just fine. The question is why it doesn't work when final css is being served from javascript bundle ?
CLARIFICATION:
Everything is referenced correctly, the image is available, it all works when I extract css into separate file using extract-text-webpack-plugin it just doesn't work when the completely same css is served from bundle.js which is then referenced in the index.html like <link href="blob:..." rel="stylesheet">
Things you should check:
Is the referenced image recognized by webpack?
Just delete the image and check if the webpack build fails. If that's the case, it is not an issue with your loader configuration.
Check the requested URL with your browser developer tools
If the request is terminated with a 404:
Check if output.publicPath (webpack) / contentBase (webpack-dev-server) point to the same location. This is from the browser's perspective (=no absolute file paths)
If you're using a <base>-tag, you need to ensure that it does replace the base URL correctly.