I am tyring to extend boostrap classes in my sass file. I'm compiling my sass as in this example.
I have copied the boostrap files into my /src folder.
However, using this basic example:
#import "bootstrap/*";
.header{
#extend .container;
background-color:red;
}
I get the error:
{
"status": 1,
"file": "C:/sites/mharrisweb-redux/src/sass/style.scss",
"line": 1,
"column": 1,
"message": "File to import not found or unreadable: bootstrap/.\nParent style sheet: C:/sites/mharrisweb-redux/src/sass/style.scss",
"formatted": "Error: File to import not found or unreadable: bootstrap/.\n Parent style sheet: C:/sites/mharrisweb-redux/src/sass/style.scss\n on line 1 of src/sass/style.scss\n>> #import \"bootstrap/*\";\n ^\n"
}
If you have this file structure:
src
bootstrap
sass
style.scss
You should use:
#import "../bootstrap/scss/bootstrap";
If you installed Bootstrap using package manager (npm or yarn), you could use:
#import "~bootstrap/scss/bootstrap";
Related
I'm very new to react-slick. I've followed the installation instruction, but the slider doesn't come with CSS styles. My React project was created by create-react-app.
slick.css and slick-theme.css are imported styles.scss which is a file that I made to import the slick CSS files. As you see my css-loader set up in webpack.config.js, class names are supposed to be changed following localIdentName.
Because of that, the class names are converted in CSS, and my class names in HTML stay the same. Therefore, they don't match. How can I match them?
webpack.config.dev.js
test: /\.(css|scss)$/,
use: [
require.resolve("style-loader"),
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1,
modules: true,
localIdentName: "[path][name]__[local]--[hash:base64:5]",
camelCase: "dashes"
}
},
...
styles.scss
#import "slick-carousel/slick/slick.css";
#import "slick-carousel/slick/slick-theme.css";
...
In your style.scss files put this
:global {
#import 'node_modules/slick-carousel/slick/slick';
}
Adding :global will prevent css modules from renaming them
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
I have a project using angular-cli. I am using mdc components/. I want to import individual component's sass files. For this,
1) I have changed the default styleExt using this command
ng set defaults.styleExt scss
2) Renamed the file style.css to style.scss.
3) In angular-cli.json changed
"styles": [
"styles.css"
],
to
"styles": [
"styles.scss"
],
4) Added stylePreprocessorOptions configuration to include path
"stylePreprocessorOptions": {
"includePaths": [
"node_modules"
]
}
5) Finally in style.scss file imported
#import '~#material/button/mdc-button';
but this is showing
ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precis
ion":8,"includePaths":["D://SK//Study//Material//MaterialWithAngularDemo//src//node_modules"]}!./src/styles.scss
Module build failed:
undefined
^
File to import not found or unreadable: #material/theme/mixins.
Parent style sheet: D:/SK/Study/Material/MaterialWithAngularDemo/node_modules/#material/button/mdc-button.scss
in D:\SK\Study\Material\MaterialWithAngularDemo\node_modules\#material\button\mdc-button.scss (line 17, column 1)
# ./src/styles.scss 4:14-187
# multi ./src/styles.scss
Am I missing something?
There was a mistake in includePath instead of node_modules it should be ../node_modules.
"stylePreprocessorOptions": {
"includePaths": [
"../node_modules"
]
}
After changing this, it is working fine.
I am trying to develop a web application using sass and reactjs.
The Sass structure is like the one in the image attached.
Image - ![1]: http://i.imgur.com/1XPwP87.png
The library.scss and settings.scss file is imported in the styles.scss file.
Inside each reactjs component, I have a js, scss, css.
MainLayout (Component)
MainLayout.js
MainLayout.css
MainLayout.scss
Now, all the breakpoints, grids, etc generated in the "style.css" file and I want to use it in the "MainLayout.scss".
So, in the "MainLayout.scss" file, I did
#import '../../assets/css/styles.scss';
.main-content {
display: flex;
flex-wrap: wrap;
#include from-breakpoint(tablet-portrait) {
position: relative;
}
}
But, I get this error stated below :
=> changed: C:\projects\vliegtickets-frontend\src\components\MainLayout\MainLayout.scss
{
"status": 1,
"file": "C:/projects/vliegtickets-frontend/src/components/MainLayout/MainLayout.scss",
"line": 53,
"column": 14,
"message": "no mixin named grid-desktop\n\nBacktrace:\n\tsrc/components/MainLa
yout/MainLayout.scss:53, in mixin #content\n\tsrc/assets/css/library/_breakpoi
nts.scss:16, in mixin from-breakpoint\n\tsrc/components/MainLayout/MainLayout.
scss:52",
"formatted": "Error: no mixin named grid-desktop\n\n
Backtrace:\n
\tsrc/components/MainLayout/MainLayout.scss:53, in mixin #content\n \tsr
c/assets/css/library/_breakpoints.scss:16, in mixin from-breakpoint\n \t
src/components/MainLayout/MainLayout.scss:52\n on line 53 of src/componen
ts/MainLayout/MainLayout.scss\n>> \t\t\t\t#include grid-desktop;\n -----------
--^\n"
}
Can someone please help me with this ? What should I do to to make my "scss" files inside the components make use of the "style.scss"?
What is the best way to have a global css file in Vuejs for all components? (Default css like bg color, button styling, etc)
import a css file in the index.html
do #import in main component
put all the css in the main component (but that would be a huge file)
Import css in your index.html, but if you're using webpack you can just import your stylesheets in your main js config and all your components will get the css.
As comments below suggested if using webpack adding this to main.js works:
import './assets/css/main.css';
I found the best way is to create a new file in the assets folder, I created as global.css but you can name anything of your choice. Then, import this file global.css file in the main.js.
Note: Using this approach you can also create multiple files if you think the global.css is getting really large then simply import all those files in the main.js.
#\assets\global.css
/* move the buttons to the right */
.buttons-align-right {
justify-content: flex-end;
}
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './routes'
Vue.config.productionTip = false
// Importing the global css file
import "#/assets/global.css"
new Vue({
router,
render: h => h(App)
}).$mount('#app')
In App.vue you can add a style property to declare you CSS file:
<style>
#import './assets/css/global.css';
</style>
You can also do something like this: https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/
My folders are mostly structured like this:
- src
- assets
- _global.scss
- _colors.scss
- _fonts.scss
- _paragraphs
- index.scss // <-- import all other scss files.
This also works with normal css.
create a new css file in your assets folder for example : global.css
import "global.css" to main.js
import '#/assets/main.css';
There are to two ways, as I know, to achieve this.
Approach 1
Utilize vue.config.js configuration, less config can also be replaced with sass:
module.exports = {
css: {
loaderOptions: {
less: {
additionalData: `#import '#/style/common.less';`
}
}
}
}
Approach 2
In your .vue file, make your style looks like this:
<style lang="less">
#import (reference) "../../style/variables.less";
#app {
background: #bgColor;
}
</style>
Note: the (reference) flag is used to make variables defined in variables.less take effect. If you don't have variables, #import "../../style/variables.less"; is sufficient to do the trick.
For your reference, you can also take a look at this link:
https://github.com/tjcchen/vue-practice/tree/master/multipage-app
Sass announced their new module system. Why don't you use #use and #forward?
My approach is the best way to use scss with vite.
Use defineConfig to setup global scss (colors, mixin) and reuse in all component without import
css: {
preprocessorOptions: {
scss: {
additionalData: `#use "~/styles/main.scss" as *;`,
},
},
},
Here: code sandbox
create a vue.config.js file in your root directory
Create a styles folder inside your src folder and you can create your global style file here for example base.scss
to use scss install two dependencies
npm install node-loader sass-loader
Inside your vue.config.js paste code from below
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `#import "#/styles/base.scss";`
}
}
}
};