Import a SCSS files from Node Modules

Hi @ELIYACOHEN

I didn't test with animate but try to add a ~ before

@import "~animate.css"

Animate.css does not provide scss files so you may want to copy the files you need in your resources directory, you have the commands for it in the Elixir documentation.

@mdecooman Thank you for your reply.

I tried adding ~ before and it didn't work either. I've tried to check it on bootstrap-sass and it didn't work too.

And btw, It's animate.scss, not .css

start from the node_modules folder:

@import "node_modules/path/to/animate.css"

@Jaytee it's still messy.

Isn't there an option to add to Laravel Elixir's sass task a pipe with this package (https://www.npmjs.com/package/sass-module-importer)?

It's not that messy at all. Remember, you're only including it once at the top of your file.

You could probably build your own but it's really not worth it.

If you're importing multiple files from animate, you're probably best to just put a script in your gulpfile to include them all from that directory, then, it's problem solved.

When you've got the option to import modules by just coding something like import "~module~", and there is, starting from the node_modules sound a bit bad practice.

Ah, I forgot that I am using the "~" since I came to webpack. Bad moments are fast forgotten... Using a "~" is not bad practice as long as you know what it means. If it is one than, oh well, I am happy to be the perpetrator.

If the solution from @Jaytee doesn't restore your inner peace, I invite you to forget gulp and embrace the new Laravel Mix with webpack, a time saver.

I hope you get it working now.

@mdecooman I don't see in the docs how can I import scss with webpack. Can you give a small example of how can I achieve that? I didn't see how can I do that in the docs

Hi @EliyaCohen

I assume you try with a new Laravel 5.4 project and you use the Laravel Mix which is an excellent wrapper around webpack (included). Laravel Mix can be used outside Laravel or with previous versions.

The package.json looks like

{
  "private": true,
  "scripts": {
    "dev": "node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node_modules/cross-env/bin/cross-env.js NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "bulma": "^0.3.1",
    "laravel-mix": "^0.5.0",
    "vue": "^2.0.1"
  }
}

Here in my example, I use the Bulma CSS package. I only import it in the app.sass (I renamed scss to sass but that is the same principle.

// resources/assets/sass/app.sass

// Bulma
@import "~bulma"

Then you compile

npm run dev   //or other options

Hope it helps

I found a simple way to get this to work Simply add ..

{
            loader: 'sass-loader',
            options: {
              "includePaths": [
                path.resolve(__dirname, 'node_modules'),
                path.resolve(__dirname, 'src')
              ]
            }
          }

to you sass-loader in webpack.config.js

also if you are using parcel you can create a .sassrc.js with ...

const path = require('path')

const CWD = process.cwd()

module.exports = {
  "includePaths": [
    path.resolve(CWD, 'node_modules'),
    path.resolve(CWD, 'src')
  ]
}