I've cloned and installed this VueJs SSR application (created by Vuejs community itself):
https://github.com/vuejs/vue-hackernews-2.0
I want to change the CSS preprocessor from stylus to Sass, so what i did is:
Install sass dependencies:
npm install -D sass-loader node-sass
Add rule to webpack config (build/webpack.base.config.js):
rules: [
// ... other rules omitted
// this will apply to both plain `.scss` files
// AND `<style lang="scss">` blocks in `.vue` files
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
when i run npm run dev i got this error:
ERROR Failed to compile with 1 errors 5:54:17 PM
error in ./src/App.vue?vue&type=style&index=0&lang=scss&
Module parse failed: Unexpected token (13:5)
You may need an appropriate loader to handle this file type.
|
|
| body {
| background: #000
| }
Your vue-loader config seems perfect according to official documentation.
However in your CSS you're missing a semicolon
you have to change this:
body {
background: #000
}
to this one:
body {
background: #000;
}
Related
I am using fullcalendar with vue3. I want to change change colors for button and text in fullcalendar.
vue version
"vue": "^3.2.26",
I am getting error
Syntax Error: Error: PostCSS plugin postcss-custom-properties requires
PostCSS 8.
I am following steps mentioned in fullcalendar documentation.
fullcalendar-vars.css
:root {
--fc-border-color: green;
--fc-button-text-color: #ff0000;
}
I have installed following packages
"postcss": "^8.4.7",
"postcss-calc": "^8.2.4",
"postcss-custom-properties": "^12.1.4",
"postcss-loader": "^6.2.1",
Added postcss.config.js at root
module.exports = {
plugins: [
require('postcss-custom-properties')({
preserve: false, // completely reduce all css vars
importFrom: [
'client/fullcalendar-vars.css' // look here for the new values
]
}),
require('postcss-calc')
]
}
And my vue.config.js as follow
const path = require("path");
module.exports = {
pages: {
index: {
entry: "./client/main.js",
},
},
outputDir: path.resolve(__dirname, "./client/dist"),
};
Also I would like to know, Do I need make any changes in vue.config.js?
PostCSS error
Vue CLI scaffolded projects already include PostCSS (including postcss, postcss-calc, and postcss-loader), so you don't need to install it in your project. The only dependency needed here is postcss-custom-properties.
To resolve the PostCSS error, you should uninstall the PostCSS dependencies that you had mistakenly added:
npm uninstall --save-dev postcss postcss-calc postcss-loader
Starting from scratch
To setup custom colors for FullCalendar in a Vue CLI scaffolded project:
Install postcss-custom-properties with:
npm install --save-dev postcss-custom-properties
Create postcss.config.js with the following PostCSS configuration:
// <projectRoot>/postcss.config.js
module.exports = {
plugins: [
require("postcss-custom-properties")({
preserve: false,
importFrom: [
"client/fullcalendar-vars.css",
],
}),
require("postcss-calc"),
],
}
Create fullcalendar-vars.css with the following CSS:
/* <projectRoot>/client/fullcalendar-vars.css */
:root {
--fc-border-color: green;
--fc-button-text-color: #ff0000;
}
Note: Changes to this file are not hot-reloaded, so the dev server must be restarted to reflect any updates.
Start the Vue CLI dev server with:
npm run serve
demo
I am trying to add scss to my Vue.js 2 project, but for some reason it is not working. I tried installing the following:
npm install sass-loader node-sass style-loader --save-dev
Inside my build folder, I have webpack files, and there inside webpack.base.conf.js I tried to add loader:
loaders: [
...
// this one
{
test: /\.s[a|c]ss$/,
loader: 'style!css!sass'
}
]
Inside the build folder, there is also vue-loader.conf.js file, with this piece of code:
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
Should I change that to something else? I am new to vue, and what I found so far is not doing the job. I tried putting lang="scss" in style tag, but it throws an error after it.
This is how my build folder looks like, with the webpack files:
We're having a problem with our Vue.js application on Windows 10 / IE 11.
The application was giving SCRIPT1003: Expected ':' until we updated out babel.config to the following:
module.exports = {
presets: [
[
'#vue/cli-plugin-babel/preset',
{
targets: {
'ie': '11'
}
}
]
]
}
At which point the error is now SCRIPT1002: Synxax Error chunk-vendors.js (11365, 9311) which appears to relate to the vuelidate node module.
It appears that I need to exclude the above package, but I dont understand where the syntax should go.
It's also likely that there will be multiple packages that I need to exclude.
The base project was built using vue-cli 4.4.1 and the config files haven't moved far from the stock install
Do you want to transpile the modules? You could use exclude property in webpack.config.js or babel.config.js to transpile modules.
You could change this line:
...
exclude: /node_modules/,
...
into this:
...
exclude: /node_modules\/(?!name-of-untranspiled-module)/,
...
If you need to exclude more than one module you can extend the exception list like so:
exclude: /node_modules\/(?![module1|module2])/
For more information, you could refer to this link.
My question is similar to this one but I do not understand the answer there:
Webpack Less-Loader with Style-Loader not injecting <style> tag
I don't have the "reputation" to comment, so I will ask a new question.
I do not want to include my .less fine in my .js, I simply want to use LessCSS notation in the tag in my layout, template, page and components.
I have installed the less loader:
$npm install --save-dev less-loader
I have added the following to my quasar.conf.js file:
extendWebpack (cfg) {
/* EXISTING
cfg.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/
})
*/
// NEW
cfg.module.rules.push({
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
]
})
}
And as soon as I add " lang='less'" to my style tag of my component (LoadingOverlay.vue):
<style lang="less">
</style>
I get the following error when running quasar dev:
ERROR Failed to compile with 1 errors 12:02:54
error in ./src/components/global/LoadingOverlay.vue?vue&type=style&index=0&lang=less&
Module build failed (from ./node_modules/less-loader/dist/cjs.js):
// load the styles
var content = require("!!../../../node_modules/css-loader/index.js!../../../node_modules/less-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingOverlay.vue?vue&type=style&index=0&lang=less&");
^
Unrecognised input
in C:\wamp\www\plenty-mobile\src\components\global\LoadingOverlay.vue?vue&type=style&index=0&lang=less& (line 4, column 12)
# ./node_modules/vue-style-loader??ref--9-oneOf-2-0!./node_modules/css-loader??ref--9-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-2-2!./node_modules/less-loader/dist/cjs.js??ref--9-oneOf-2-3!./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/global/LoadingOverlay.vue?vue&type=style&index=0&lang=less& 4:14-539 14:3-18:5 15:22-547
# ./src/components/global/LoadingOverlay.vue?vue&type=style&index=0&lang=less&
# ./src/components/global/LoadingOverlay.vue
# ./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/layouts/default.vue?vue&type=script&lang=js&
# ./src/layouts/default.vue?vue&type=script&lang=js&
# ./src/layouts/default.vue
# ./src/router/routes.js
# ./src/router/index.js
# ./.quasar/app.js
# ./.quasar/client-entry.js
# multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js
Any help very much appreciated - thanks
I have followed the docs and tried the above but am limited as I am pretty new to quasar framework and vueJS
I simply expect to be able to use lessCSS notation in my tags in templates, layouts, pages and components
How do we add PostCSS support to Vue cli 3 (I'm using beta 7)? Is there a plugin for it? Its not supported out of the box.
When I tried to import like this
import './index.pcss'
using the default cli generated project
./src/index.pcss
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sofa {
| font-family: "sofachrome", serif;
| }
# ./src/main.js 5:0-22
my postcssrc.js:
module.exports =
{
'plugins': {
'autoprefixer': {},
'postcss-smart-import': {},
'postcss-custom-properties': {},
'postcss-nested': {}
}
}
Just use the .css extension, not .pcss. If you must use .pcss you'll have to configure that in webpack. As for how to properly tap into that rule to do that I'd need to research a bit. Though, I think just using .css is a clear win.
PostCSS (as pointed out by Bill and Yuriy) works by default, but the Webpack loader is only configured for .css extensions. To modify it, update your vue.config.js:
module.exports = {
chainWebpack: config => {
config.module
.rule('pcss')
.use('postcss-loader')
.tap(options =>
merge(options, {
sourceMap: false,
})
)
}
}
Modify the example according to your needs.
Read more in vue-cli docs