search

tailwindlabs / discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.
MIT License
171 stars 9 forks source link

Problem with Laravel 5.6 and Webpack when using @apply #171

Open psmedia90 opened 6 years ago

psmedia90 commented 6 years ago

@adamwathan I am having an error show up when I run NPM run dev.

here are the versions i am using

Laravel: 5.6.34

TailWindCss: 0.6.5

"laravel-mix-tailwind": "^0.1.0"

i am using sass not less.

Here is the error

> npm run development

> @ development /var/www/CarlosPizza55
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting

 ERROR  Failed to compile with 2 errors                                                                                                                                             9:52:41 PM

 error  in ./resources/assets/sass/app.scss

Module build failed: ModuleBuildError: Module build failed: Syntax Error

(45:3) `@apply` cannot be used with .text-white because .text-white is included in multiple rulesets.

  43 |  */
  44 | .clear-input-with-underline {
> 45 |   @apply .appearance-none .border-none .w-full .text-white .mr-3 .py-1 .px-2 .leading-tight;
     |   ^
  46 | }
  47 |

    at runLoaders (/var/www/CarlosPizza55/node_modules/webpack/lib/NormalModule.js:195:19)
    at /var/www/CarlosPizza55/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /var/www/CarlosPizza55/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/var/www/CarlosPizza55/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/var/www/CarlosPizza55/node_modules/postcss-loader/lib/index.js:194:44)

 error  in ./resources/assets/sass/app.scss

Module build failed: Syntax Error

(45:3) `@apply` cannot be used with .text-white because .text-white is included in multiple rulesets.

  43 |  */
  44 | .clear-input-with-underline {
> 45 |   @apply .appearance-none .border-none .w-full .text-white .mr-3 .py-1 .px-2 .leading-tight;
     |   ^
  46 | }
  47 |

 @ ./resources/assets/sass/app.scss 4:14-206
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
                                                                                                                                                                                      Asset    Size  Chunks             Chunk Names
/js/app.js  396 kB       0  [emitted]  /js/app

ERROR in ./resources/assets/sass/app.scss
Module build failed: ModuleBuildError: Module build failed: Syntax Error

(45:3) `@apply` cannot be used with .text-white because .text-white is included in multiple rulesets.

  43 |  */
  44 | .clear-input-with-underline {
> 45 |   @apply .appearance-none .border-none .w-full .text-white .mr-3 .py-1 .px-2 .leading-tight;
     |   ^
  46 | }
  47 |

    at runLoaders (/var/www/CarlosPizza55/node_modules/webpack/lib/NormalModule.js:195:19)
    at /var/www/CarlosPizza55/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /var/www/CarlosPizza55/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/var/www/CarlosPizza55/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/var/www/CarlosPizza55/node_modules/postcss-loader/lib/index.js:194:44)
 @ ./resources/assets/sass/app.scss
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

ERROR in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/sass-loader/lib/loader.js??ref--5-4!./resources/assets/sass/app.scss
Module build failed: Syntax Error

(45:3) `@apply` cannot be used with .text-white because .text-white is included in multiple rulesets.

  43 |  */
  44 | .clear-input-with-underline {
> 45 |   @apply .appearance-none .border-none .w-full .text-white .mr-3 .py-1 .px-2 .leading-tight;
     |   ^
  46 | }
  47 |

 @ ./resources/assets/sass/app.scss 4:14-206
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/psmedia90/.npm/_logs/2018-08-31T04_52_41_290Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/psmedia90/.npm/_logs/2018-08-31T04_52_41_342Z-debug.log

Package.json

  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "cross-env": "^5.2.0",
    "jquery": "^3.2",
    "laravel-mix": "^2.1.14",
    "laravel-mix-purgecss": "^2.2.3",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "lodash": "^4.17.10",
    "popper.js": "^1.14.4",
    "tailwindcss": "^0.6.5",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.5.17"
  },

  "dependencies": {
    "laravel-mix-tailwind": "^0.1.0"
  }
}

Webpack.mix.js

require('laravel-mix-tailwind');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

var basePaths = {
    src: 'resources/assets/',
    dest: 'public/',
    npm: 'node_modules/'
};

var paths = {

    images: {
        src: basePaths.src + 'images/',
        dest: basePaths.dest + 'images/'
    },
    scripts: {
        src: basePaths.src + 'js/',
        dest: basePaths.dest + 'js/'
    },
    styles: {
        src: basePaths.src + 'sass/',
        dest: basePaths.dest + 'css/'
    }

};

var appFiles = {
    style: paths.styles.src + '/*.scss',
    scripts: [paths.scripts.src + 'app.js'],
    jQuery: [paths.scripts.src + 'jquery/jquery.js']
};

var vendorFiles = {

    bootstrap: {
        scss: basePaths.npm + 'bootstrap/scss/',
        js: basePaths.npm + 'bootstrap/dist/js/',
        mixins: basePaths.npm + 'bootstrap/scss/mixins/'
    },

    jQuery: {
        js: basePaths.npm + 'jquery/dist/'
    }

};

mix.scripts([
    vendorFiles.jQuery.js + 'jquery.js',
    'resources/assets/js/rotating-cards.js',
    'resources/assets/js/main.js',
    vendorFiles.bootstrap.js + 'bootstrap.js'
], 'public/js/app.js');

mix
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .tailwind();

if (mix.inProduction()) {
    mix.version();
} ```

## TailWind.scss
``` /**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 */
@tailwind preflight;

/**
 * This injects any component classes registered by plugins.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/components";
 */
@tailwind components;

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */

@import "components/forms";

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/utilities";
 */
@tailwind utilities;

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */

app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// TailwindCSS
@import "tailwindcss/tailwind";

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

// Main Site Scss
@import "imports/color";
@import "imports/footer";
@import "imports/font";
@import "imports/nav";
@import "imports/carousel";
@import "imports/site";
@import "imports/location";
@import "imports/pages";
@import "imports/image";
//@import "imports/404";

components/forms

    TailwindCSS Custom Forms Components

       Components groupings or cleaning up class names
 */

.clear-input-with-underline{
  @apply .appearance-none .border-none .w-full .text-white .mr-3 .py-1 .px-2 .leading-tight;
}

let me know if you need to see any other files

Thank You

jpmaga commented 5 years ago

Dunno what you are trying to do, but I got it to work quite effortlessly.

After you install it, create the config file:

./node_modules/.bin/tailwind init

change your mix config to this. (I'm using purgecss, if you are not, remove the references.)

webpack.mix.js:

const mix = require("laravel-mix");
const tailwindcss = require("tailwindcss");
require("laravel-mix-purgecss");

mix
  .js("resources/js/app.js", "dist/js")
  .sass("resources/sass/app.scss", "dist/css")
  .options({
    processCssUrls: false,
    postCss: [tailwindcss("./tailwind.js")]
  })
  .purgeCss();

Put this in your app.scss.

Should work now when you run dev or production on laravel-mix.

jpmaga commented 5 years ago

PS: also, when using apply, remove the dot before the class. Example

@apply text-white py-2 px-4;
1337erik commented 5 years ago

ran into this same issue just now. I don't have a forsure solution, but I have a hunch that it is because we have bootstrap loaded as well, and it is confused as to whether or not we are referring to bootstrap's text-white or tailwind's..

going to continue to look into this now to confirm

also.. hunch #2 => using something like purgeCss or any other 'unused rule trimmer' tool could fix this under the condition that you aren't using the rule that causes this conflict as the build tool would be removing the conflicted class definition..

open to discuss

kerrinhardy commented 4 years ago

@1337erik I've just run into this problem and am using Bootstrap in the same project too