css-styled-imports v1.0.3

Install

Install with npm

$ npm i css-styled-imports --save

Usage

This package was intended to be used with React Native. The styled-component module is needed and must be installed.

First, you need to create a css file and add an ID with the name of the component that you're going to stylize. Then, you save the file with the exact same name of the CSS ID.

For example, in your src folder:

theme/css/input.css

#input {
background: lightgrey;
color: black;
}

Now, you have to import the .css and the default cssImport function in the page that you want. I like to use a separated component to put all my styled-components. For example:

src/cssComponents.js

// Required imports
import styled from "styled-components";
import cssImport from "css-styled-imports";

// All your CSS files
import "theme/css/input.css";

// Here, we pass the name of the .css file/css ID as a param
const Input = styled.input`${cssImport("input")};`;

export { Input };

This way, you generate a component with you css code imported in it.

You can mix the cssImport function with any style that you want as you did with single styled-component module. For example:

const Input = styled.input`
${cssStyled("input")};
font-size: 1em;
background: ${props => props.primary ? "red" : "blue"};`;

Using with SASS With the correct method, you can use SASS and it's functionalities if you have, for example a directory like this in your src:

Then, to compile you .scss into .css automatically, you can run something like this:

$ sass --no-source-map --watch scss:css

For now, this module does not auto-refresh the browser on saving a css/scss file, so you will have to do it manually.

If you have some problem, comment or suggestion, you can contact me.

Author

Martin Goiriz

• github/martingoiriz

• twitter/martingoiriz

License

Copyright © 2020 Martín Goiriz

Released under the MIT license.