So, when I was using Vue-cli 3.X I used a method similar to This Thread to load my many style files globally.
However, I have upgraded to Vue-cli 4.X and since then, have been unable to use this technique. I just get this error:
./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$grey-700".
on line 8 of src/styles/global.scss
from line 12 of /Users/kieranparker/Desktop/Personal/Side Projects/Dev/landingpages/src/App.vue
>> color: $grey-700;
---------------^
Essentially, anything outside of the main screens (such as components) just will not grab anything in my "_variables.scss". (Even if I import them all into one file and use that)
Any suggestions?
(Quick update)
I am using node-sass and my config looks like so;
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
#import "#/scss/_variables.scss";
#import "#/scss/_mixins.scss";
`
}
}
}
};
Ok so, previously it was a case of just using "data:"
But, since Vue 4, it seems it now has to be "prependData:"
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `#import "~#/styles/_variables.scss";`
}
}
}
}
it's changed to additionalData
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `#import "~#/styles/_variables.scss";`
}
}
}
}
Related
While developing a Vue web component, using #vue/web-component-wrapper, the styles of npm_modules are not applied. The css actually isn't loaded at all.
Here is my main.js:
import Vue from 'vue';
import wrap from '#vue/web-component-wrapper';
import App from './App.vue';
import '#/modules/filters';
import '#fortawesome/fontawesome-free/css/all.css';
import '#fortawesome/fontawesome-free/js/all';
const wrappedElement = wrap(Vue, App);
window.customElements.define('hello-there', wrappedElement);
Before that, I had the problem, that even my normal css wasn't applied. I resolved this, by help of the answer of this question: Styling not applied to vue web component during development
Even those imported styles in main.js:
import '#fortawesome/fontawesome-free/css/all.css';
won't load at all.
First thought -> there is something wrong with the webpack css-loader/vue-style-loader
Here is my vue.config.js (using the workaround from the above mentioned question):
function enableShadowCss(config) {
const configs = [
config.module.rule('vue').use('vue-loader'),
config.module.rule('css').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('css').oneOf('vue').use('vue-style-loader'),
config.module.rule('css').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('css').oneOf('normal').use('vue-style-loader'),
config.module.rule('postcss').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('postcss').oneOf('vue').use('vue-style-loader'),
config.module.rule('postcss').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('postcss').oneOf('normal').use('vue-style-loader'),
config.module.rule('scss').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('scss').oneOf('vue').use('vue-style-loader'),
config.module.rule('scss').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('scss').oneOf('normal').use('vue-style-loader'),
config.module.rule('sass').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('sass').oneOf('vue').use('vue-style-loader'),
config.module.rule('sass').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('sass').oneOf('normal').use('vue-style-loader'),
config.module.rule('less').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('less').oneOf('vue').use('vue-style-loader'),
config.module.rule('less').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('less').oneOf('normal').use('vue-style-loader'),
config.module.rule('stylus').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('stylus').oneOf('vue').use('vue-style-loader'),
config.module.rule('stylus').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('stylus').oneOf('normal').use('vue-style-loader'),
];
configs.forEach((c) =>
c.tap((options) => {
options.shadowMode = true;
return options;
})
);
}
module.exports = {
chainWebpack: (config) => {
enableShadowCss(config);
},
configureWebpack: {
output: {
libraryExport: 'default',
},
resolve: {
symlinks: false,
},
module: {
rules: [
{
test: /\.ya?ml$/,
use: 'raw-loader',
sideEffects: true,
},
],
},
},
css: {
extract: false,
loaderOptions: {
sass: {
additionalData: `#import "#/styles/_variables.scss";`,
},
},
},
};
So I tried to add css-loader/vue-style-loader manually to webpack with:
chainWebpack: (config) => {
enableShadowCss(config);
config.module
.rule('css')
.test(/\.css$/)
.use('css-loader')
.loader('css-loader')
.end();
},
maybe those styles load now, but it throws an syntax error whilst building anyways:
./node_modules/#fortawesome/fontawesome-free/css/all.css
Syntax Error: CssSyntaxError
(1:4) /Users/.../node_modules/#fortawesome/fontawesome-free/css/all.css Unknown word
> 1 | // style-loader: Adds some css to the DOM by adding a <style> tag
| ^
2 |
3 | // load the styles
I know I know, seems obvious but those lines don't appear in the file at all. Maybe in an imported file though.
Without using the wc-wrapper everything works fine!!
Well anyways... no clue what I should try next. I am a newbie to webpack and Vue!
If anybody has an idea I would greatly appreciate it!
Cheers
I have the problem that mochapack does not seem to work together with the style resources loader.
packages that seem to produce the problem:
"#vue/cli-plugin-unit-mocha": "~4.2.0",
"vue-cli-plugin-style-resources-loader": "~0.1.4"
My vue.config.js file:
const path = require("path");
module.exports = {
...
pluginOptions: {
"style-resources-loader": {
preProcessor: "scss",
patterns: [path.resolve(__dirname, "./src/assets/styles/*.scss")]
}
}
};
The single sass file that is included through the above config:
#import "~vue-select/src/scss/vue-select.scss";
It seems to load the vue-select.scss correctly but then when interpreting this file it seems to loose its current directory and does not find the imported style.
Error log excerpt:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
1 │ #import "global/variables";
│ ^^^^^^^^^^^^^^^^^^
╵
/node_modules/vue-select/src/scss/vue-select.scss 1:9 #import
/src/components/HelloWorld.vue 1:9
See full detail error message and code:
https://github.com/petritz/food-calculator-web/runs/560575367
I'm using Mocha for my Unit Tests. After having the same issue, I noticed that I had to change my vue.config.js from:
module.exports = {
publicPath: "/",
css: {
sourceMap: true,
loaderOptions: {
sass: {
prependData: `#import "#/scss/main.scss";`
}
}
}
};
to:
module.exports = {
publicPath: "/",
css: {
sourceMap: true,
loaderOptions: {
scss: {
additionalData: `#import "#/scss/main.scss";`
}
}
},
chainWebpack: config => {
if (
process.env.NODE_ENV === "test" ||
process.env.NODE_ENV === "production"
) {
const scssRule = config.module.rule("scss");
scssRule.uses.clear();
scssRule.use("null-loader").loader("null-loader");
}
}
};
EDIT: This might have some issues with local dev and production, so I had to change a couple of things:
I upgraded the sass-loader to at least 10.1.0
I had to install the null-loader to work around with CSS Preprocessor modules
I had to use chainWebpack in the vue.config.js to use the null-loader in my test and production environments
I found the answer in this open issue on the Vue CLI GitHub repo: https://github.com/vuejs/vue-cli/issues/4053#issuecomment-544641072
I am using Vue typeScript with GraphQL. Whenever I try to use a query using deconstructor I get an error from Vetur. I am able to use GetPostData query in the Vue Component and its working fine.
Trying to use this - https://github.com/apollographql/graphql-tag#support-for-multiple-operations
Vue File
import { GetPostData } from "../../util/queries/getPageData.gql";
getPageData.gql
query GetPostData {
continents {
code
}
}
query GetCountries($code: String!) {
country(code: $code) {
code
}
}
Vue.config.js
const antdTheme = require("./src/theme.js");
module.exports = {
publicPath: "/",
pwa: {
iconPaths: {
favicon32: "./favicon.png",
favicon16: "./favicon.png",
appleTouchIcon: "./favicon.png",
maskIcon: "./favicon.png",
msTileImage: "./favicon.png"
}
},
css: {
loaderOptions: {
less: {
modifyVars: antdTheme,
javascriptEnabled: true
}
}
},
chainWebpack: config => {
// GraphQL Loader
config.module
.rule("graphql")
.test(/\.(graphql|gql)$/)
.use("graphql-tag/loader")
.loader("graphql-tag/loader")
.end();
}
};
I think it states that's what you can do but I don't think you really can.
It's better to put all your queries in a javascript file and import 'graphql-tag' to store queries instead of using a .gql file.
Just tested and Vetur didn't complain, could have been a bug that is already fixed.
According to graphql-tag package this case is supported (docs), so if Vetur complains must be an issue with the extension itself.
I have three .scss files in my Vue project.
The main global one, which I have imported to my main app component.
Then, the other two are ones that container variables, and with such cannot be important in the same way, as the variable cannot be found.
So, I created a vue.config.js file, and added -
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "#/styles/_variables.scss";`
},
}
}
};
The issue is, that imports my _variables.scss file, but I also want to import a _other.scss file (from the same folder).
I cannot figure out how to structure it for it to import and use both.
If you're using sass-loader 8 or above, you need to use prependData instead of data. For example:
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
#import "#/styles/_variables.scss";
#import "#/styles/_variables2.scss";
`
}
}
}
};
#import "#/styles/_variables.scss"; #import "#/styles/_other.scss"
Worked perfectly. But so did importing into one large file, and loading that.
I built my simple site using Vue UI (the ones that comes with Vue-CLI 3), and it created sourcemaps in the /dist folder. I deploy these sourcemaps along with the production files. When I load up my site, Chrome indicates it cannot parse the sourcemaps in Devtools.
DevTools failed to parse SourceMap: https://www.thisisnotarealdomain.net/js/app.92ef018b.js.map
I have tried the following in vue.config.js:
module.exports = {
css: {
// modules: true,
loaderOptions: {
// pass options to sass-loader
sass: {
// #/ is an alias to src/
// so this assumes you have a file named `src/scss/variables.scss`
data: `#import "#/scss/_globals.scss";`
}
}
},
configureWebpack: {
devtool: '#source-map'
}
}
and
module.exports = {
css: {
// modules: true,
loaderOptions: {
// pass options to sass-loader
sass: {
// #/ is an alias to src/
// so this assumes you have a file named `src/scss/variables.scss`
data: `#import "#/scss/_globals.scss";`
}
}
},
configureWebpack: {
devtool: '#cheap-eval-source-map'
}
}
But Chrome still complains and I cannot see my original source.
I found some articles on the Internet regarding Webpack and Chrome interaction with sourcemaps, but I cannot tell if the problem has been resolved. Is there a problem with sourcemaps created by Vue UI?
Thanks.