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:
Related
I have a Vue 2 app that uses Webpack, and I am trying to use in it the node module PSD.js, which in itself utilizes CoffeeScript as part of it's dependencies. When I try to compile i get the error:
Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type,
referring to the the file ./node_modules/coffee-script/lib/coffee-script/register.js that PSD.js installed as part of it's dependencies when I did npm install psd.
Any ideas on how to make this work?
I understand I need to tell the Vue app how to handle .coffee files with a loader, but I have tried installing coffee-loader, coffee, set the vue.config.js to:
module.exports = {
publicPath: "./",
configureWebpack: {
target: "node-webkit",
node: false,
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
yet still nothing works, I get the same error. I feel it is because I am not using CoffeeScript directly but rather a node module that I AM using, psd.js, is the one using it. That is why I cannot set lang="coffee" in the script tag attribute of my Vue module (I am using vanilla JS to run everything).
thnx in advance
ADDING MORE INFO:
I use a boilerplate framework to setup my app, and it initialises the vue/webpack app for me indirectly.
To reproduce, and even though this system is for Adobe plugins, you do not need the Adobe host app to see the issue, do:
npm install -g bombino
Then in a folder of your choosing run:
bombino
and fill in these params when asked:
? Name of panel? Hello World
? Use your custom templates or bombino defaults? Bombino
What tooling preset should be used? Vue-CLI
? Which Vue-CLI template should be used? bombino-vue-bare (Absolute minimum)
? Host apps to include: After Effects
? Base CEF Port (between 1024 and 65534) 8666
? Run npm install for you? Yes
then cd into Hello-World and run npm run serve. You should see the app is compiled correctly and is running on some port (8080 or higher if taken).
Now go back to the root folder and install psd.js: npm install psd
then go back into Hello-World and run npm run serve again. This time it will fail to compile with the error I started this question with. Even if you go and install coffee-loader by doing npm install --save coffeescript coffee-loader and change the vue.config.js to be like so:
publicPath: "./",
// Thanks Eric Robinson
configureWebpack: {
target: "node-webkit", // Set the target to node-webkit (https://webpack.js.org/configuration/target/)
node: false, // Don't set certain Node globals/modules to empty objects (https://webpack.js.org/configuration/node/),
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
or if you do vue use coffee - all of these result in the same error: the compiler/packager doesn't know how to handle the .coffee file (used as a dependency by psd.js).
Thnx again to anyone who has info
I want to import a SCSS file in my Nuxt project.
For this I tried to follow the documentation where I simply add the path with filename in css file as:
nuxt.config.js
css: ['#/scss/_introPage.scss]
But it gives error as
Cannot find module '../scss/_introPage.scss'
My folder structure:
> components
> pages
> scss > _introPage.scss
> static
> store
> test
> nuxt.config.js
> package.json
How can I include the SCSS file and apply the global CSS into my project?
If anyone needs any further information please let me know.
Thank you everyone for your input.
I had to install sass, sass-loader#10 and fibers for it to work.
nom install --save-dev sass sass-loader#10 fibers
Nuxt.js provides a good way to share global CSS files with a css option in nuxt.config.js
example:
// nuxt.config.js
export default {
// other options
css: [
// Load a Node.js module directly (here it's a Sass file)
'bulma',
// CSS file in the project
'#/assets/css/main.css',
// SCSS file in the project
'#/assets/css/main.scss'
],
// other options
}
in your case, you need to add sass and sass-loader to load sass, scss, less &... files in your projects.
SASS: yarn add sass-loader sass
LESS: yarn add less-loader less
Stylus: yarn add stylus-loader stylus
to share your global style files(scss, sass, & ... ) and other good features
you can use Nuxt Style Resources.
Share variables, mixins, functions across all style files (no #import
needed)
Add #nuxtjs/style-resources dependency using yarn or npm to your project with on of these commands:
yarn add -D #nuxtjs/style-resources or npm install --save-dev #nuxtjs/style-resources
and then you can add '#nuxtjs/style-resources' in buildModules option in nuxt.config.js file import your global scss files like this:
// nuxt.config.js
export default {
// other options
buildModules: [
'#nuxtjs/style-resources',
],
styleResources: {
// your settings here
scss: ['#/assets/scss/_introPage.scss'],
sass: [],
less: [],
stylus: [],
hoistUseStatements: true // Hoists the "#use" imports. Applies only
to "sass", "scss" and "less". Default: false.
}
// other options
}
for more information see this link https://www.npmjs.com/package/#nuxtjs/style-resources
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.
i tried to import fontawesome.scss but it seems like i am doing it in a wrong way. So here what i did:
Fist of all, i installed it npm install #fortawesome/fontawesome-free
Next i configured webpack.config.js with file-loader
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}
Tried to import all stuff to my main.scss file
$fa-font-path: "../../node_modules/#fortawesome/fontawesome-free";
#import "../../node_modules/#fortawesome/fontawesome-free/scss/fontawesome";
#import "../../node_modules/#fortawesome/fontawesome-free/scss/solid";
Then i tried to build npm run build and got the errors:
ERROR in ./src/scss/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../../node_modules/#fortawesome/fontawesome-free/fa-solid-900.eot' in 'C:\Users\gosto\Documents\project\src\scss'
Check if the npm module is added to the package.json file
Look for the package in the node_modules and check whether you have the files in the relative path, you have mentioned.
Read the docs for the package here
Follow the way the package is configured & imported in the docs
Id like to read the contents of a text file which i have imported in my .vue file like import ToS from '~/static/terms-of-service.txt';
I want to access the contents as a String.
How can I do it?
VUE CLI 3
First install the raw loader
npm install raw-loader --save-dev
If you don't have a vue.config.js, make one at root and add
module.exports = {
chainWebpack: config => {
config.module
.rule('raw')
.test(/\.txt$/)
.use('raw-loader')
.loader('raw-loader')
.end()
}
}
To get the text file as string (if placed in src/assets/txt/):
import file from '#/assets/txt/file.txt'
N.B. Remember to rebuild
I'm using nuxt (created with vue cli 3), and this is what worked for me:
npm install --save-dev raw-loader
Update nuxt.config.js
build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
config.module.rules.push({
enforce: 'pre',
test: /\.txt$/,
loader: 'raw-loader',
exclude: /(node_modules)/
});
}
}
I ended up using https://github.com/webpack-contrib/raw-loader
Seems that you need a loader to read files in vue