How to Include One CSS File in Another

Is it possible to include one CSS file in another?

Yes:

@import url("base.css");

Note:

• The @import rule must precede all other rules (except @charset).
• Additional @import statements require additional server requests. As an alternative, concatenate all CSS into one file to avoid multiple HTTP requests. For example, copy the contents of base.css and special.css into base-special.css and reference only base-special.css.

How to include one css file into another with flask?

While the usual practice is to treat a CSS file as static, it's possible to instead treat it as a template. You'll do something like

1. Add a route to return CSS. This will look something like

from Flask import make_response, render_template

@app.route('/style.css')
def css():
    resp = make_response(render_template("style.css"))
    resp.headers['Content-type'] = 'text/css'
    return resp

2. Add a template named "style.css" to your template folder. Except that rather than being HTML, it will contain CSS. All of the power of Jinja2 is at your disposal here, including the include mechanism.

3. Reference this from HTML using

    <link rel="stylesheet" type="text/css" href="{{ url_for('css') }}">

Importing .css from another CSS?

Put the following code at the top of your main .css file, and point the url to the file you want to import.

@import url("file.css");

Include a CSS files into the main CSS file

First of all this is related to

Best way to include CSS? Why use @import?

In my personal experience I previously liked to use that practice because it reduced the amount of tags in my html, however, nowadays you can set several properties like asynchronous loading which is not possible from @import, not to mention that opening the secondary css sheets becomes more difficult, it is not as easy as viewing source code and clicking on styles.css so as mentioned in the related article it could be a good option but not a rule and not a recommended option.

Import css file from same non-root directory

As it is an @import, make sure it is placed at the very top of your main CSS document.

@import url("./nav.css");

@import url("./width.css");

Although you can do it, I would personally advise against it. Although it might seem to be more "sorted" it creates extra HTTP requests, which depending on the size of the project, may hurt your performance.

How do i include only one CSS file in the html head when I import multiple .scss files?

This work is done by webpack, not by Gatsby. Of course, Gatsby extends from a custom implementation but you can import the same behavior into another project by adding a custom webpack configuration (as you can do in Gatsby as well).

webpack bundles all JavaScript, JSON, and CSS (by default does not support SCSS, it should be achieved by adding a custom webpack's configuration or via plugins) file using a code-splitting technique. This allows you to divide your code across a few bundles that are loaded as needed or as requested.

In addition, one thing that may work for you, is to use major files to collect some imports. Given:

src/
    components/
        Footer/
            index.jsx
            style.scss
        Header/
            index.jsx
            style.scss
        Navbar/
            index.jsx
            style.scss

You can create under /src/styles a file called styles.scss and:

@import 'components/Footer/style';
@import 'components/Header/style';
@import 'components/Navbar/style';

Then import the file in the top-level component that contains the other ones.

---

Update:

The warnings that you are talking about are due to a wrong importation order in styles. There are not important since webpack chunks all those styles but they create a warning. There a property called ignoreOrder (set by default as false). You can fix it by:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      ignoreOrder: true, // here
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

Link CSS from another folder?

If your current folder is /current/folder/location/index.html, and your .css file is in /current/second/folder/style.css, then use this as an example:

<link rel="stylesheet" type="text/css" href="../../second/folder/style.css">

or alternatively:

<link rel="stylesheet" type="text/css" href="/current/second/folder/style.css">

However, if the second file is in `/current/folder/second/style.css, then use:

<link rel="stylesheet" type="text/css" href="../second/style.css">

---

Related Topics