CODEWITHSUNDEEP
cssnode.jswebpackcomposer-phplaravel-5.4
dsudenfield
dsudenfield

Reputation: 21

Laravel 5.4 adding zurb foundation 6.3.0 using composer

After I run composer require zurb/foundation how do I reference the foundation file in my vendor directory @import foundation always says that the file is not found and it doesn't look like laravel mix has the option to includePaths like elixir did in previous versions.

Almost everything I see online installs foundation with npm is that the preferred way? I have nothing against using npm but when I run "npm run production" it fails due to string literals "`" because uglifyJs does not support ES6. I am trying the composer version because I believe that it already has the js compiled so I wont have to do anything hacky to get that to run in production.

Upvotes: 1

Views: 168

Answers (2)

dsudenfield
dsudenfield

Reputation: 21

I was actually able to get foundation working with the npm package. By adding the webpackConfig it excludes the foundation folder from being uglified in production.

if (mix.inProduction()) {
mix.webpackConfig({
    output: {
        chunkFilename: 'js/chunk-[id]-[chunkhash].js'
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules(?!\/foundation-sites)|bower_components/,
            use: [{
                loader: 'babel-loader',
                options: Config.babel()
            }]
        }]
    }
});
}

Upvotes: 0

dsudenfield
dsudenfield

Reputation: 21

I was able to find the answer to this problem myself. You have to copy the foundation files to the appropriate resources/assets folder and then reference them from there. I set the third parameter to false because by default it collapses the files.

.copy('vendor/zurb/foundation/js', 'resources/assets/js/foundation', false) .copy('vendor/zurb/foundation', 'resources/assets/sass/foundation', false)

Then reference the foundation files like so for scss: @import ./foundation/scss/foundation;

Upvotes: 1

Related Questions