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>
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'm having a build issue with the scss at-rule "extend" using Vite to build out a Vue3 component library using the bulma-scss NPM package.
Using Bluma buttons for example, I would like to import the bulma-scss button.scss file into my tag in my .vue file (or into the button.scss file and then import that into the script tag) like so:
<template/>
<script/>
...
<style lang="scss">
#import 'bulma-scss/elements/button';
</style>
When running $ vite build I get this error from Vite:
File: /Users/my-user/sites/component-library/node_modules/bulma-scss/elements/_button.scss
Error: The target selector was not found.
Use "#extend %control !optional" to avoid this error.
It is specifically this line in the bulma-scss package that it doesn't like (in this example) https://github.com/j1mc/bulma-scss/blob/master/elements/_button.scss#L71
it looks like I can get around this by adding the following preprocessor option to my storybook's vite configs:
css: {
preprocessorOptions: {
scss: {
additionalData: `#import "bulma-scss";`
}
},
},
But that would include the entirety of bulma-scss right? Ideally I would only import the things I need from bulma.
And here is my entire vite config file (sans the css preprocessorOptions)
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import {resolve} from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: resolve(__dirname, 'src/index.js'),
name: 'lmsComponentLibrary',
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['vue'],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
vue: 'Vue',
},
},
},
},
resolve: {
alias: {
'bulma-scss/': require('path').join(__dirname, 'node_modules/bulma-scss/'),
}
},
});
I think the problem comes from the bulma-scss package itself. In the file that you are importing there is no %control placeholder. Even its import ../utilities/controls and ../utilities/mixins don't have that placeholder neither. So the error is expected here.
The %control is defined in bulma-scss/utilities/extends so you can fix the problem by importing that file. BUT, it will lead to another problem because in the _extends.scss there are some variables that are not defined. So you need to import all the file that contains these variables.
Luckily, the package has a file containing all the utility variables. So you just need to import it.
#import 'bulma-scss/utilities/all'; <-- Add this line
#import 'bulma-scss/elements/button';
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'm currently trying to use Webpack to bundle all my files and I don't know how to proceed when dealing with multiple folders and .scss files.
I used to use grunt to do these tasks, and this is an example of my folder structure:
functions
- _mixin.scss
- _function.scss
- [...]
variables
- _colors.scss
- _typo.scss
- [...]
ui
- _button.scss
- _grid.scss
- [...]
view
- _home.scss
- _about.scss
- [...]
With Grunt I would run a task to generate a file called main.scss containing all the #import, for example:
#import 'function/_mixin.scss';
#import 'function/_function.scss';
#import 'variables/_colors.scss';
#import 'variables/_typo.scss';
[...]
Currently I'm specifying an import inside my .js file (used in conjunction with extract-text-webpack-plugin) to define the main.scss file, but each new import, or old one, needs to be added/removed manually. Is there a way to automate this task with WebPack?
When webpack 3 or 4
Use node-sass-glob-importer
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const globImporter = require('node-sass-glob-importer');
...
test: /\.(scss|sass)$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "sass-loader",
options: {
sassOptions: {
importer: globImporter()
}
}
}
]
Use this way.
// Import all files inside the `scss` directory and subdirectories.
#import 'scss/**/*.scss';
#import 'scss/component-*';
Note - only works with webpack 2 (requires update for webpack 3^)
You could use the plugin import-glob-loader github / npm
It supports globbing with
#import "foo/**/*";
which outputs to
#import "foo/1.scss";
#import "foo/bar/2.scss";
#import "foo/bar/3.scss";
I'm trying to use bulma in my project. But I get an error:
{ Error: resources/assets/sass/app.scss
Error: File to import not found or unreadable: bulma
Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss
on line 1 of resources/assets/sass/app.scss
>> #import "bulma"
^
at options.error (/Users/Janssen/Code/forumv2/node_modules/node-sass/lib/index.js:283:26)
status: 1,
file: '/Users/Janssen/Code/forumv2/resources/assets/sass/app.scss',
line: 1,
column: 1,
message: 'resources/assets/sass/app.scss\nError: File to import not found or unreadable: bulma\n Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss\n on line 1 of resources/assets/sass/app.scss\n>> #import "bulma"\n ^\n',
formatted: 'Error: File to import not found or unreadable: bulma\n Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss\n on line 1 of resources/assets/sass/app.scss\n>> #import "bulma"\n ^\n',
messageFormatted: '\u001b[4mresources/assets/sass/app.scss\u001b[24m\nError: File to import not found or unreadable: bulma\n Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss\n on line 1 of resources/assets/sass/app.scss\n>> #import "bulma"\n ^\n',
messageOriginal: 'File to import not found or unreadable: bulma\nParent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss',
relativePath: 'resources/assets/sass/app.scss',
name: 'Error',
stack: 'Error: resources/assets/sass/app.scss\nError: File to import not found or unreadable: bulma\n Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss\n on line 1 of resources/assets/sass/app.scss\n>> #import "bulma"\n ^\n\n at options.error (/Users/Janssen/Code/forumv2/node_modules/node-sass/lib/index.js:283:26)',
showStack: false,
showProperties: true,
plugin: 'gulp-sass' }
MacBook-Pro-van-Jamie:forumv2 Janssen$
This is how my Gulp file looks like:
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(mix => {
mix.webpack('app.js')
.styles([
'./node_modules/normalize-css/normalize.css',
'./node_modules/nprogress/nprogress.css',
'./node_modules/sweetalert/dist/sweetalert.css',
'./node_modules/bulma/css/bulma.css'
])
.sass('app.scss');
});
When I try to import it in my app.scss like this:
#import "bulma"
I receive the above error. What could be wrong?
bulma.scss file needs to be present in the resources/assets/sass directory to import if you are importing from npm package then define the full path like
#import 'node_modules/pathtobulma.scss/bulma';
Try to include them in you main sass file rather in the gulp file . I think that will do the trick.
Try changing const elixir = require('laravel-elixir'); to var elixir = require('laravel-elixir'); This helped me.