Search code examples
csswebpackvue.jsnode-modulesvue-cli

How to configure webpack css loader in a vue-cli project

I have a newly generated vue-cli project. I've installed the Pure.CSS framework using npm install purecss --save. But I cannot figure out how to integrate, import or load the css framework into my project. I don't even know where in the project I should keep my usual css (mystyle.css etc.) files. I am guessing it should be inside the src/assets directory. Here is the vue-cli Project Structure.

How can I bundle all the css files in a single file, such as app.css or main.css?

Solution

  • You can import it as any other resource by:

    import '../node_modules/purecss/path/to/css/file.css'

    in your App.vue for instance.

    Ensure the path to node_modules is correct.

    Then you're ready to use purecss styles anywhere in your templates.