I have a problem with node-sass 7.0.1.
When use a pseudo class :not sass not compile and not show any error.
This is my code:
.wf-field--inline {
& > *:not(label + *) {
border-top-left-radius: 0 !important;
}
}
Output:
.wf-field--inline > * ;
Any ideas?
Thanks in advance.
You can start with just sass because node-sass is old news now.
Steps
npm install --save-dev sass or yarn add -D sass
And then in your package.json under scripts
"scripts": {
"compile": "sass main.scss -w --no-source-map -q main.css"
}
Learn more about flags here
Related
I hope this help to you to fix this case:
I have a app created with next configuration:
npx create-react-app my-project
cd my-project
Next I config Sass
npm install sass
# or
yarn add sass
Next I updated my files .css by .scss (src/index.css by src/index.scss)
Next step, in public folder in my html add the next code
<style lang="sass">
#import url("src/index.scss");
</style>
To install tailwind:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Add the paths to all of your template files in your tailwind.config.js file.
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Next add the #tailwind directives for each of Tailwind’s layers to your ./src/index.scss file.
#tailwind base;
#tailwind components;
#tailwind utilities;
Finally
You can use all Tailwind classes in any path where you have your project components inside the "./src" path
I hope it helps you!
I have Yarn 2.4.0
I used yarn add #mikro-orm/core to install the package.
package.json
{
"name": "test",
"dependencies": {
"#mikro-orm/core": "^4.3.2"
}
}
When I try to do something like:
const mikroORM = require("#mikro-orm/core");
const orm = mikroORM.MikroORM.init();
I get an error pointing to the import statement with:
code: 'MODULE_NOT_FOUND',
This happens with other packages as well.
What might be the problem here?
Run yarn to install the node_modules specified in the package.json.
I'm trying to use scss in svelte 3, i've done the steps placed in this post:
scss guide in svelte 3
but i keep receiving a syntax error
"Colon is expectedsvelte(css-syntax-error)"
in code like this:
<style type="text/scss">
#container {
display: flex;
/*error in the div below*/
div {
background: red;
}
}
i've prettier setup too, but i don't think it's related
Node-sass is now deprecated, so above still applies but can just be
npm install svelte-preprocess sass --save-dev instead :)
To add support for scss, you'll need add a pre-processor like svelte-preprocess
npm install svelte-preprocess node-sass --save-dev
In rollup.config.js:
import sveltePreprocess from 'svelte-preprocess';
and then under
plugins: [
svelte({
...,
preprocess: sveltePreprocess()
}),
and restart the server.
To enables scss support in vscode create a svelte.config.js file:
const sveltePreprocess = require('svelte-preprocess')
module.exports = {
preprocess: sveltePreprocess(),
}
And restart vscode
When you are using svelte-kit to create your svelte application, you don't need to change then svelte.config.js because it is already set up and it looks as follows:
import adapter from '#sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
/** #type {import('#sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
kit: {
adapter: adapter()
}
};
export default config;
All you have to do is to install sass using your package manager as follows:
yarn add -D sass
# or using npm
npm i --save-dev sass
And boom!! you will be able to style your components using sass or scss by just changing the attribute value for lang to either sass or scss
using scss
<div class="app">
<div class="app__bin">
<h1>Hello world</h1>
</div>
</div>
<style lang="scss">
.app {
.app__bin {
h1 {
color: red;
}
}
}
</style>
Using sass
<style lang="sass">
.app
.app__bin
h1
color: red
</style>
Happy hacking with svelte!!
I'm setting up a Gatsby Project with gatsby-plugin-sass.
my gatsby-config.js file:
module.exports = {
plugins: [
'gatsby-plugin-resolve-src',
'gatsby-plugin-sass',
'gatsby-plugin-react-helmet',
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/assets/images`,
},
},
],
}
I have the following styles file structure:
|
|src
|-styles
|--base
|--- _variables.scss
|--components
|--- _Buttons.scss
|--- ...
|--main.scss
Im my _Buttons.scss file I'm importing like this:
#import '../base/variables';
#use 'sass:color as *;
When I'm trying to use the sass color functions like this (as specified on https://sass-lang.com/documentation/modules)
%buttons-focus {
background-color: color.adjust($primary-color, $alpha: -0.5);
}
I get the following Error:
Invalid CSS after "...nd-color: color": expected expression (e.g. 1px, bold), was ".adjust($primary-co"
In my main.scss I'm importing styles like this:
#import './components/Buttons';
Am I overseeing something?
I've tried changing up #use with #import, with no luck. For me it seems like the gatsby-sass-plugin is not aware of sass modules.
gatsby-plugin-sass uses node-sass under the hood. But in order to support built-in modules with #use, you need to configure gatsby-plugin-sass to use dart-sass instead. See below.
Built-In Modules - sass-lang
Only Dart Sass currently supports loading built-in modules with #use. Users of other implementations must call functions using their global names instead.
Alternative Sass Implementations - gatsby-plugin-sass
By default the node implementation of Sass (node-sass) is used. To use the implementation written in Dart (dart-sass), you can install sass instead of node-sass and pass it into the options as the implementation:
npm install --save-dev sass
gatsby-config.js
plugins: [
{
resolve: `gatsby-plugin-sass`,
options: {
implementation: require("sass"),
},
},
]
I have installed vuetify.js but it's giving me error in webpack configuration.
I have changed my webpack v4 configuration, also installed
node-sass and sass-loader
Webpack.config.js
{
test: /\.(s*)css$/,
loader:['style-loader', 'css-loader', 'sass-loader']
}
This is the error
ERROR in ./node_modules/vuetify/src/styles/main.sass 3:0
Module parse failed: Unexpected character '#' (3:0)
You may need an appropriate loader to handle this file type.
| // Modeled after ITCSS https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
|
#import './settings/_index'
| #import './tools/_index'
| #import './generic/_index'
# ./node_modules/vuetify/lib/framework.js 5:0-33
# ./node_modules/vuetify/lib/index.js
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/header/Header.vue
# ./src/header/Header.vue
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/app/App.vue
# ./src/app/App.vue
# ./src/index.js
I use the following installed the following dependencies and it works fine for me:
"sass": "^1.22.9",
"sass-loader": "^7.2.0",
"vue-cli-plugin-vuetify": "^0.5.0",
"vuetify-loader": "^1.3.0"
did you add this lang="scss" to your tag ?
when you use scss you should have this format of style tag
<style lang="scss" scoped>...</style>