I'm having an issue with path on windows.
On OSX it works just fine.
Here is my task:
gulp.task('build:less', function () {
return gulp.src('./src/less/style.less', {base: './src/less'})
.pipe(less({
paths: [path.join(__dirname, 'less', 'includes')]
}))
.pipe(rename(pkg.css))
.pipe(gulp.dest('./build/assets/'));
});
./src/less/style.css contents
#import "../../vendor/bootstrap/less/bootstrap";
#import "../../vendor/bootstrap/less/glyphicons";
#import "../../vendor/font-awesome/less/font-awesome";
#import "../../vendor/material-design-iconic-font/less/material-design-iconic-font";
#import "../../vendor/bootstrap-select/less/bootstrap-select";
#import "../../vendor/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox";
#import "variables";
#import "navbar";
Error message
C:\TeamCity\buildAgent\work\f6d8e60b97f3ac0>call gulp build:less
[18:28:34] Using gulpfile C:\TeamCity\buildAgent\work\f6d8e60b97f3ac0\gulpfile.js
[18:28:34] Starting 'build:less'...
C:\TeamCity\buildAgent\work\f6d8e60b97f3ac0\node_modules\gulp-less\node_modules\accord\node_modules\when\lib\decorators\unhandledRejection.js:80
throw e;
^
Error: '../../vendor/bootstrap/less/bootstrap.less' wasn't found. Tried - C:\TeamCity\buildAgent\work\f6d8e60b97f3ac0\vendor\bootstrap\less\bootstrap.less ,C:\TeamCity\buildAgent\work\f6d8e60b97f3ac0\vendor\bootstrap\less\bootstrap.less,..\..\vendor\bootstrap\less\bootstrap.less in file C:\TeamCity\buildAgent\work\f6d8e60b97f3ac0\src\less\style.less line no. 1
Related
I tried to import styles into my vuejs file by doing this
<style scoped>
#import '../assets/front/css/bootstrap.min.css';
#import '../assets/front/css/all.min.css';
#import '../assets/front/css/slick.css';
#import '../assets/front/css/simple-line-icons.css';
#import '../assets/front/css/style.css';
</style>
But anytime i run npm run dev i get this error
WARN [vite:css] #charset must precede all other statements
The project is in Nuxt3 by the way.
Here is the link to Stackblitz
I try to do something realy basic what is described in spartacus documentation https://sap.github.io/spartacus-docs/css-architecture/#skipping-specific-component-styles
At file src/styles.scss:
$styleVersion: 4.3;
$skipComponentStyles: (cx-mini-cart, cx-product-carousel, cx-searchbox);
#import '~#spartacus/styles/index';
But looks like $skipComponentStyles variable not works as expected, no changes at UI. Is this a bug of lattest release or do I miss something?
It was not working for me too before I changed the styles imports from angular.json to styles.scss.
Before:
"styles": [
"src/styles.scss",
"src/styles/spartacus/user.scss",
"src/styles/spartacus/storefinder.scss",
"src/styles/spartacus/product.scss",
"src/styles/spartacus/order.scss",
"src/styles/spartacus/checkout.scss",
"src/styles/spartacus/cart.scss"
],
After:
"styles": [
"src/styles.scss"
],
styles.scss
$skipComponentStyles: (cx-mini-cart);
#import '~#spartacus/styles/index';
#import "styles/spartacus/user";
#import "styles/spartacus/storefinder";
#import "styles/spartacus/product";
#import "styles/spartacus/order";
#import "styles/spartacus/checkout";
#import "styles/spartacus/cart";
#import 'styles/custom-styles';
I am trying use sass loader for node modules. But no matter what I try, the following error occurs:
SassError: Can't find stylesheet to import.
My vue.config.js look like this:
module.exports = {
css: {
sourceMap: true,
loaderOptions: {
scss: {
prependData: `
#import "~#/my-node-module/theme/engine.scss";
`
}
}
},
};
Try this, from the docs:
#import "~my-node-module/theme/engine.scss";
The ~ tells Webpack that the import path is not a relative path.
The # is a Vue CLI 3+ alias for the src directory.
So ~# is essentially the same as #. Either way, Webpack knows the path is not relative and checks the src directory, and won't find the node module.
The ~ by itself causes Webpack to look elsewhere, usually node_modules.
Project .scss file
If you had a .scss asset in your src > assets > scss directory, for example, you could do this:
#import '#/assets/scss/variables.scss';
Or this:
#import '~#/assets/scss/variables.scss';
Or even this:
#import '~/../src/assets/scss/variables.scss';
I'm starting a new project using the Vue CLI, and this is my first time using it.
I'm using a CSS framework (Spectre), which I installed via NPM. I'm now trying to import only parts of it. I have found a way to get it to work, but it's quite cumbersome, and I'd like to find a better way using the includePaths option.
Basically, the whole thing can be summarized like this: I have a *.scss file that looks like this:
#import "./node_modules/spectre.css/src/accordions";
#import "./node_modules/spectre.css/src/avatars";
#import "./node_modules/spectre.css/src/badges";
#import "./node_modules/spectre.css/src/breadcrumbs";
...
and I obviously want to simplify it by removing the ./node_modules/spectre.css/src/ part from all the imports.
In vue.config.js, here's what I have:
module.exports = {
css: {
loaderOptions: {
sass: {
includePaths: [path.resolve(__dirname, 'node_modules/spectre.css/src')]
} } } }
But that doesn't work.
I've looked at the following questions:
How to #import external SCSS properly with webpack and Vue.js?
Webpack-simple + vue-cli with SASS - Can't compile?
Using sass-resources-loader with vue-cli v3.x
But couldn't find an answer, or couldn't figure it out.
The URL transform rules of Vue CLI projects allow using ~ as a path alias into the project's node_modules/, so you could do:
#import "~spectre.css/src/accordions";
#import "~spectre.css/src/avatars";
#import "~spectre.css/src/badges";
#import "~spectre.css/src/breadcrumbs";
No changes to your Vue config is needed.
I have tried css import using #import "../../node_modules/superfish/dist/css/superfish.css"; but I got error
{ [Error: ../../node_modules/superfish/dist/css/superfish.css.scss doesn't exist!]
formatted: 'Error: ../../node_modules/superfish/dist/css/superfish.css.scss doesn\'t exist!\n on line 101 of stdin\n>> #import "../../node_modules/superfish/dist/css/superfish.css";\n --------^\n',
message: '../../node_modules/superfish/dist/css/superfish.css.scss doesn\'t exist!',
column: 9,
line: 101,
file: 'stdin',
status: 1 }
Please help me
When you use the #import directive, you can leave off the file extension at the end of the path. Try #import "../../node_modules/superfish/dist/css/superfish";
http://sass-lang.com/guide#topic-5
If that doesn't work, you could try uploading the superfish.css file to your assets/scss folder and import it into theme.scss using #import "superfish";