Let's say I would like to use Material Design in my Vue APP and I would like to stick to the web component package distributed by Google. When I import the package in a .vue file:
#use '/node_modules/material-components-web/index.scss'
I get the following error
Syntax Error: SassError: Can't find stylesheet to import.
╷
28 │ #use '#material/feature-targeting/feature-targeting';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
which I already know why! I think by default vue does not include node_modules in its web pack config and that's why it is trying to find the package at the root of the project and not the specified relative path.
Anyways, how can this be solved?
Related
I want to use an Vue package like this
Vue.use(npmPackageName)
but when I import vue form 'vue' this message appear "Can’t resolve vue"
my question is how can I use npm package in the administration component?
thanks a lot.
this is the npm_modules folder
and this is the webpack.config.js file
here is how i try to import and use it
Yes, you can.
You have to add the package to your own module's package.json and the build-administration.sh would install the dependencies.
This works only, if jq is installed on your system - otherwise a warning is printed which can be overseen easily.
I am using #vue/cli 4.5.8; "sass-loader": "^8.0.2"
I am trying to make an scss file globally accessible in the vue project.
I made a scss file called style.scss. This file include varible.scss, mixin.scss and bootstrap.scss. All sass files are in /scss folder.
Now in My main.js I import "./scss/style.scss". But it doesn't work. I got sass error: variable undefined.
I know we can use sass-loader to make the style.scss globally available by setup vue.config.js, but I just want to know could this method work, because I've see people on the stackoverflow mentioned this approch.
I'm trying to read the content of a markdown file (.md) stored in statics or assets folder of my quasar project and I have updated the quasar.conf.js file with the following change to support raw file loading after adding raw-loader to my project
extendWebpack(cfg) {
cfg.module.rules.push({
test: /\.md$/i,
use: "raw-loader"
});
I'm trying to load the markdown, using import command from one of the .vue component script tag as below
import md from "~statics/help.md";
But when I run the project, it compiles to 100% and throws the below error
• Compiling:
└── SPA ████████████████████ 100% done in ~13s
ERROR Failed to compile with 1 errors 8:22:43 AM
This dependency was not found:
* ~statics/help.md in ./node_modules/babel-loader/lib??ref--1-0!./node_modules/#quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/Help.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save ~statics/help.md
let me know if any solution
Its seems like quasar can't find the proper reference since I don't know your exact folder structure
Try using ../static/{filname} and see if it works
I have an npm package structured as follows:
my-package
├── build
├── many.config.files
├── package.json
└── src
It made sense to put helper files such as config files and scripts into the root of my package. Then it made sense to have a src file so that my source files wouldn't mix with all my config files. Then it made sense to have a build directory where the built version of src would get populated (maybe some transpiling and minification happens, etc).
Now my src directory has various JS files and folders, all of which users of my library should be able to import.
src
├── file1.js
├── file2.js
└── utils
For example, import utils3 from "my-package/utils/file3.js" should work just fine for them. They should not need to type import utils3 from "my-package/build/utils/file3.js" to import the file.
What is the best practice for dealing with this situation?
I have tried/considered various approaches:
Setting "main": "./build" in my package.json. This did not resolve the import error for me.
Setting "directories": {"utils": "./build/utils"} in my package.json. This did not resolve the import error for me.
Copying package.json into my build directory during build. Then npm publishing the build directory instead of the entire project. This has the upside of only sharing the built code. This has the downside that the built package will have information in its package.json that doesn't make sense because files/directories are missing/mislocated.
Something along the lines of module.exports = require('./build') in an index.js file. This did not work either.
I'm trying to include some CSS in my create-react-app project. The CSS is from a 3rd party NPM package and therefore its in the node_modules directory.
I tried:
import '/node_modules/packagename/css/styles.css';
But I get the error:
Module not found: You attempted to import /node_modules/packagename/css/styles.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.
I would prefer to not move the CSS to src/ so it can be updated via NPM. I could symlink but as I develop on windows and deploy to linux this isn't ideal.
What's the best way from me to include the CSS?
Find the path of the css file
example: ./node_modules/packagename/dist/css/styles.css
Import using the path related to node_modules (anything after node_modules/ )
import 'packagename/dist/css/styles.css'
relative paths are unnecessary from node_modules and should not be the recommended way to include the css
all you have to do is leave off the preceding slash and node_modules directory same as importing a js package from node modules:
import 'package/css/style-to-import.css'
when using (s)css imports, use the tilde (~) to indicate an absolute import:
#import '~package/css/style-to-import.css'
A distinction not made from the previous answers is it depends on where you're importing the CSS into; a component or into a stylesheet.
If you're importing a node_modules stylesheet into a component, you don't need a relative path like mentioned above.
import 'packagename/dist/css/styles.css'
However, if you're importing a node_modules stylesheet into a CSS/SCSS file, you need to use tilde ~.
#import '~packagename/dist/css/styles.css'
I found this a bug of a pain. specially my webpack.config.js is not running anymore.
specially react app is now running in src folder and the import files need to be in the public folder.
i was using materialize-social and found out the easiest way is to move node_module file folder "materialize-social" to the public directory any other way please commend it down.