I am using bootstrap-sass. The node module is installed. I should expect I can, in any .scss file, use the below line to import into an appropriate sheet
#import 'bootstrap';
My understanding is what should happen is the compiler crawls up until it finds package.json, hops into node_modules, and finds the appropriate package. Instead I am getting the below error.
Error: File to import not found or unreadable: bootstrap
If I replace my import with a fully qualified path as below, then everything works gravily.
#import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
I am using gulp-sass to compile. Guessing I just have some minor config bits off but I can't figure out what it is.
Pass the path as an includes path....
Eg. It will look something like this if you're using gulp
.pipe(sass({
includePaths: ['node_modules/bootstrap-sass/assets/stylesheets']
}))
Then you should be fine to use:
#import 'bootstrap';
It will not import stuff like Javascript / Node.js. It will look for the bootstrap file in the same folder as the file which imports it. So yes, you need to use the long path or place the bootstrap file in the same folder.
Related
I have a file named main.scs that imported a general.scss file that has at the first line this :
#import "compass/css3";
As you can see I imported compass/css3 to use some predefined mixins.
Of course all of them are in a larvel project. larvel have a built-in Mix library to compile scss and other type files.
Also I wrote these to webpack.mix.js file :
let mix = require('laravel-mix');
mix.sass('resources/assets/sass/main.scss', 'public/main/css');
But when running npm run production command I got this error:
error in ./resources/assets/sass/main.scss
Module build failed:
#import "compass/css3";
^
File to import not found or unreadable: compass/css3.
Parent style sheet: D:/wamp/www/loverspay/resources/assets/sass/_general.scss
in D:\wamp\www\loverspay\resources\assets\sass\_general.scss (line 1, column 1)
Even I installed compass in the project directory But there is still that problem
What do I do?
If you have compass library installed inside node_modules directory you can try to import it like this:
#import "~compass/css3";
If it's doesn't help you can try to modify sass includePaths config variable (laravel mix has a third option to pass additional config):
mix.sass('resources/assets/sass/main.scss', 'public/main/css', {
includePaths: [path.resolve(__dirname, './relative/path/to/compass')]
});
Here is the tree structure of my project
I am trying to import one scss file (available in theme named variables.scss) into the another scss file (named tick-tock.component.scss) but I receive the following error message.
Error: File to import not found or unreadable: ../../theme/variables
here is how I am trying to import the file.
here is how I am trying to import the file.
but if I give the absolute path it works like the following it works. (which ofcourse is wrong way)
#import 'C:/My-Source/angular-component-library/src/theme/variables';
partials/import must be prefixed with an underscore like '_variables.scss'
you can read more about it here in the section "partials": http://sass-lang.com/guide
I'm using react-redux-starter-kit for my project. I want to know how it is possible to create a global SCSS file that when imported in _base.scss, it will affect the whole project. I've tried to #import like in the examples within the file, but nothing works. Strangely, it seems to have worked with #import './fonts/*';
I have the following structure:
styles/
----/components/
--------/Dashboard
--------/Home
--------_default.scss
----/fonts/
----_base.scss
----core.scss
And therefore, the _base.scss is like this:
#import './components/_default'
But it doesn't work. No errors are shown. I've tried also to create a theme/default.scss, just like the example in the commentary within the file, but also no effect.
In your root component just import your main scss file like you would import a module:
require('path/to/styles/_base.scss')
or:
import 'path/to/styles/_base.scss'
Just make sure that in your webpack config there is:
{
test: /\.scss$/,
loader: 'style!css!sass',
}
I'm currently using css-loader, node-sass, sass-loader and style-loader packages within webpack to compile my sass files, here is how my loader looks at the moment:
{
test: /\.scss$/,
loader: 'style!css!sass'
}
I want to use folder structure like this for my styles
styles
components/
main.sass
and somehow within main.sass I want to import everything from components folder so something like #import './components/**/*' is this possible via webpack?
You can prefix a Sass import with '~' to tell the Sass loader to use webpack's require() resolution on the import. Once webpack is in charge of the import you have some flexibility.
If you do a dynamic require, e.g. require('~./components/' + someVar + '.scss'), webpack can't evaluate the variable at build time and it bundles all the possible files in that directory, and the actual resolution of the require() happens at runtime (which can lead to errors at runtime if you've asked for something that doesn't exist). Not sure off the top of my head if that would give you what you need (all the files bundled) or if you would still need to explicitly require() each partial -- but if that's the case you could easily loop through all the files in the directory and require each one.
More on how you can leverage webpack's dynamic requires and loading context.
I want to override several scss files of bootstrap. The paths in my project are like this
Source code of my scss:
/src/client/sass/style.scss
Source code of bootstrap:
/bower_components/bootstrap-scss
Now if i edit the style.scss in Webstorm it cant find the import
#import "bootstrap"
Im using gulp so i created a gulp task, that generates css from default bootstrap and my additions so i dont use the WebStorm watches.
How can i configure the project, so that the #import are correctly linked to bower components? Currently im using a symlink, but it feels like a hack.
Just mark /bower_components/as Resource Root (Mark directory as/Resource root) - WebStorm will resolve imports relative to it