yarn encore dev fail after setting up material-components
I installed material-components using yarn add material-components-web --dev
and then configured app.js like this :
/* --- CSS --- */
import "../css/normalize.scss";
import "material-components-web/material-components-web.scss"
import "../css/layout.scss";
import "../css/style.scss";
/* --- RESOURCES ---*/
import $ from "jquery";
import * as mdc from "material-components-web";
When running yarn encore dev, I get the following error :
ERROR Failed to compile with 1 errors 22:30:40
error in ./node_modules/material-components-web/material-components-web.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
#import "#material/elevation/mixins";
^
File to import not found or unreadable: #material/elevation/mixins.
in /var/www/vhosts/salon-virtuel/node_modules/#material/button/_mixins.scss (line 23, column 1)
at runLoaders (/var/www/vhosts/salon-virtuel/node_modules/webpack/lib/NormalModule.js:301:20)
at /var/www/vhosts/salon-virtuel/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /var/www/vhosts/salon-virtuel/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/var/www/vhosts/salon-virtuel/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.render [as callback] (/var/www/vhosts/salon-virtuel/node_modules/sass-loader/lib/loader.js:52:13)
at Object.done [as callback] (/var/www/vhosts/salon-virtuel/node_modules/neo-async/async.js:8077:18)
at options.error (/var/www/vhosts/salon-virtuel/node_modules/node-sass/lib/index.js:294:32)
# ./assets/js/app.js 7:0-62
Entrypoint app [big] = runtime.js vendors~app.js app.css app.js
error Command failed with exit code 2.
Imports in files :
node_modules/material-components-web/material-components-web.scss
#import "#material/elevation/mdc-elevation";
node_modules/#material/elevation/mdc-elevation.scss
#import "./mixins";
#include mdc-elevation-core-styles;
node_modules/#material/elevation/_mixins.scss
#import "#material/feature-targeting/functions";
#import "#material/feature-targeting/mixins";
#import "#material/theme/variables";
#import "./variables";
Any idea about why it's happening, and how to fix this?
I think you are very close. Try to edit your encore config to include node_modules to sass loader like this:
// enables Sass/SCSS support
.enableSassLoader(function(options) {
// https://github.com/sass/node-sass#options
options.includePaths = ['./node_modules'];
}, {
// set optional Encore-specific options
// resolve_url_loader: true
});
explained here
For the case, someone else stumbles over this.
It may would have also solved your issue, if you changed the way how you import the scss/sass files.
#import "~#material/feature-targeting/functions";
#import "~#material/feature-targeting/mixins";
#import "~#material/theme/variables";
#import "./variables";
The ~ references the node_modules as well. That is at least how I do it and it works without any special config for the sass-loader.
Related
So I have the following main scss directory: /assets/scss/main.scss.
In this file, I have the following items:
#charset "utf-8";
// Initial variables must be imported first
#import "../../node_modules/bulma/sass/utilities/initial-variables.sass";
#import "../../node_modules/bulma/sass/utilities/functions.sass";
When I jump into the functions file, I'm able to view Bulmas functions code, so I want that imported.
Now I have a single css file inside the following directory: /assets/dist/main.css.
I would like to import all the .scss files under scss/ into main.scss and then compile main.scss into main.css.
I tried utilizing the following script, but nothing happens when it compiles:
"scripts": {
"css-build": "sass assets/scss/main.scss:assets/dist/main.css --style compressed"
},
The only thing that gets compiled inside the main.css file is the following:
/*# sourceMappingURL=main.css.map */
Does anyone have a good NPM/Gulp/etc.. solution on how I can take a directory of .scss files and import them into one .scss file and then compile to main.css?
This is the config I use :
Installs
npm i node-sass-glob-importer
npm i --global gulp-cli
npm i sass gulp-sass --save-dev
npm i gulp-sass-glob --save-dev
npm i gulp-sourcemaps
npm i gulp-concat
npm i gulp-uglify
gulpfile.js :
const { src, dest } = require('gulp');
const
sourcemaps = require('gulp-sourcemaps'),
sassGlob = require('gulp-sass-glob'),
sass = require('gulp-sass')(require('sass')),
concat = require('gulp-concat'),
uglify = require('gulp-uglify');
function scss() {
return src(['./dev/assets/_scss/main.scss'])
.pipe(sourcemaps.init({largeFile: true}))
.pipe(sassGlob())
.pipe(sass())
.pipe(concat('theme.min.css'))
.pipe(sourcemaps.write('.', {debug: true}))
.pipe(dest('dev/assets/css'));
};
exports.scss = scss;
function js() {
return src('./dev/assets/_scripts/**/*.js')
.pipe(uglify())
.pipe(sourcemaps.init())
.pipe(concat('theme.min.js'))
.pipe(sourcemaps.write('.'))
.pipe(dest('dev/assets/js'));
};
exports.js = js;
main.scss contains imports like #import 'folder/*'; or #import 'file.scss';
Then you can call gulp scss and gulp js
I just have basic nuxt3 starter code but it doesnt work due to cryptic error.
How do I troubleshoot this error? Nuxt troubleshooting is really hard with no relevant messages and no stack trace for the code I wrote.
ℹ Vite client warmed up in 2929ms 10:20:14
ℹ Vite server warmed up in 1633ms 10:20:15
✔ Vite server built in 4061ms 10:20:17
✔ Nitro built in 336 ms nitro 10:20:17
[nuxt] [request error] File is not defined
at $id_a2da3f49 (./.nuxt/dist/server/server.mjs:18735:20)
at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:26247:3)
nuxt.config
import { defineNuxtConfig } from 'nuxt'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
buildModules: ['#pinia/nuxt'],
css: ['assets/css/main'],
})
assets/css/
#import "tailwind/_base.css";
#import "tailwind/_components.css";
#import "tailwind/_utilities.css";
#import "_checkbox-radio-switch.css";
#import "_app.css";
#import "_scrollbars.css";
#import "_progress.css";
#import "_table.css";
Layouts -> default.vue
<template>
<div>
<side-menu/>
<slot />
<footer-bar />
</div>
</template>
Pages -> index.vue
I have these two lines of code in my main.scss as required by the MDC Web's docs.
#use "#material/button";
#include button.core-styles;
Then, I have this Gulp task to convert my main.scss file to a single build.css file. My main.scss file compiles just fine when I remove the two lines above.
The error I am getting is the following.
Message:
src\styles\main.scss
Error: Can't find stylesheet to import.
╷
1 │ #use "#material/button";
│ ^^^^^^^^^^^^^^^^^^^^^^^
My Gulp task is the following.
gulp.task('css', ['clean:css'], function() {
return gulp.src('src/styles/main.scss')
.pipe(isDist ? through() : plumber())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false }))
.pipe(isDist ? csso() : through())
.pipe(rename('build.css'))
.pipe(gulp.dest('dist/build'))
.pipe(connect.reload());
});
I am using gulp-dart-sass to compile the .scss files. How can I fix the error?
I assume you are using package.json, material-components-web is added to dependencies and dependencies are installed. Then it looks like you need to add node_modules to load paths for Sass to look for imports:
...
.pipe(sass({ includePaths: ['node_modules'] }).on('error', sass.logError))
...
package.json
"scripts": {
"compile:sass": "node-sass sass/main.scss css/style.css -w"
}
main.scss
#import "abstracts/variables";
#import "base/typography";
_variables.scss
$color-light-grey: #777;
$color-white: #fff;
_typography.scss
body {
color: $color-light-grey;
}
.heading-primary {
color: $color-white;
}
Now my issue is when I'm trying to compile with npm run compile:sass it throws the following error:
"message": "Undefined variable: \"$color-light-grey\"."
convert all file names with beginning "_"
example:
typography.scss >> to >> _typography.scss
Looks like there are two errors in your code above:
You import "abstracts/variables" but, at least in the text, the file name seems to be _variables.scss (missing an "s")
You should import "abstracts/variables" before everything else.
Like that:
#import "abstracts/variables";
#import "base/typography";
Simply import everything in this order
- abstracts
- vendors
- base
- layout
- components
- pages
- themes
When installing the UIKit npm package inside an angular2 cli project, how can it then be used? There are typings (#types/uikit) that I also installed, but I have no idea how to import the package into a controller to use its JS / CSS classes.
It's working for me on an angular-cli based project. It was important to me make my own theme and this is how I did it:
First install / add dependency to jquery and uikit:
npm install jquery --save
npm install uikit --save
Then edit .angular-cli.json file and add the scripts:
...
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/uikit/dist/js/uikit.min.js",
"../node_modules/uikit/dist/js/uikit-icons.min.js"
],
...
Now you can use UIKit wherever
import {Component} from "#angular/core";
declare var UIkit: any;
#Component({
template: `<div (click)="showAlert()">alert</div>`
})
export class OwnerComponent {
showAlert(): void {
UIkit.modal.alert('UIkit alert!');
}
}
offtopic: in the next step I explain how to configure the project to use sass / scss to make you own uikit theme
Rename the styles.css to styles.scss (don't forget to rename the file itself!)
...
"styles": [
"styles.scss"
],
...
Then you can edit style.scss to compile UIKit and make your own theme
// 1. Your custom variables and variable overwrites.
$global-link-color: #DA7D02;
// 2. Import default variables and available mixins.
#import "../node_modules/uikit/src/scss/variables-theme.scss";
#import "../node_modules/uikit/src/scss/mixins-theme.scss";
// 3. Your custom mixin overwrites.
#mixin hook-card() { color: #000; }
// 4. Import UIkit.
#import "../node_modules/uikit/src/scss/uikit-theme.scss";