I am trying to use a less file in my vue-cli created project.
Also the question if this is best practice. Earlier I added webpack globally and started a watcher and added a webpack.config.js
This time I created the project with vue-cli / vue ui and the doc says I have to use a vue.config.js where I do this:
module.exports = {
css: {
loaderOptions: {
// pass options to sass-loader
less: {
// #/ is an alias to src/
// so this assumes you have a file named `src/variables.scss`
data: `#import "#/all.less";`
}
}
}
}
I added the file in src/all.less and also tried src/assets/less/all.less and changed the path in the config file. Both do not seem to work tho.
For me the issue was I had the language for one component set as "less" when I had in my config set up just vanilla css:
<style lang="less" scoped>
//styling here
</style>
instead of
<style lang="css" scoped>
//styling here
</style>
If you are using vue cli 3 . just use less right in your vue file, just set the lang to "less" or "scss" - pretty handy. There should be no additional configuration on the webpack side :
<style lang="less">
#import './less/index.less';
Related
Problem
I am trying to access variables defined within an SCSS file from a .vue file. The project is using vue-cli.
According to Vue's docs:
"Vue CLI projects comes with support for PostCSS, CSS Modules and pre-processors including Sass, Less and Stylus."
However, if I create a variables.css file with a variable called variable, and try to import it within the script, this variable is not found.
styles/variables.module.css
$variable: 'foo';
:export {
variable: $variable
}
App.vue
<script>
import variables from "./styles/variables.module.scss";
export default {
name: "App",
methods: {},
computed: {
variable() {
console.log(variables); // Object {}
return variables.variable || "not found";
}
}
};
</script>
Importing the variables.css file within the <style module> tag of the same vue file does work however.
App.vue
<style module lang="scss">
#import "./styles/variables.module.scss";
:export {
variable: $variable;
}
</style>
What I'm trying to achieve
<p>Importing within <script>, the variable is {{variable}}</p>
// 'not found', should be "foo"
<p>Importing within <style>, the variable is {{$style.variable}}</p>
// correctly showing "foo"
Have tried:
Adding .module to the SCSS file name (as per vue's docs)
Creating a vue.config.js file with requireModuleExtension: false
(from same docs)
Reproducible demo
https://codesandbox.io/s/importing-css-to-js-o9p2b?file=/src/App.vue
You need to add webpack and CSS modular code into webpack.config.js.
npm install -D vue-loader vue-template-compiler webpack
Here is the working demo
Note: your vue-template-compiler and vue should be the same version
I'm quite new to vue.js and little bit stack.
In my .scss file I have commented line like:
// overflow: hidden;
But when I keep this line, I'm getting error:
Unknown word
and compiler highlighting this comment. I saw that it is related to webpack config, but I don't have webpack.config.js file, I have only vue.config.js file and not sure how to config it to work properly. This is my config file, which is including variables file to all styles.
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "#/styles/_variables.scss";`
}
}
}
};
I have sass-loader package installed and it is working fine - issue only with comments in .scss file.
I also found https://github.com/webpack-contrib/sass-loader/issues/171 but they are talking about webpack.config.js which I don't have.
I had the same problem. Changing the vue.config.js file is bit complex.
But this problem was resolved when I used lang="scss" in app.js where all my css imports were present.
<style lang="scss">
...
#import './stylesheets/custom.scss';
...
</stlye>
Im my webpack config I add a path
"mixins": path.resolve(
__dirname,
"resources/assets/sass/mixins/mixins.scss"
),
Which means in all my single file components I use
<style lang='scss' scoped>
#import '~variables';
This works fine but what I am finding is this file is used in 95% of components so the import really is unnecessary. I want these vars available everywhere.
How can I globally add my SASS to my single file components without the need for the import in every file?
Well, Load your common CSS from Webpack and make it available globally for all the component. Webpack configurations are as below.
sass-loader also supports a data option which allows you to share common variables among all processed files without having to explicit import them
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
#import "#/scss/_variables.scss";
#import "#/scss/_mixins.scss";
`
}
}
}
};
In here, specifing the sass loader under the loaderOptions option. Just like that, all the code in those files will be available in the global scope. So from any component we can use it out of the box:
And now you can able to access the variable in your Vue SFC without importing it.
<style lang="scss">
.classroom {
/* No need to import, it just works \o/ */
background: $bg-classroom;
}
</style>
Reference Official Docs here
Hope this helps!
I'm importing bulma into Vue (installed via vue init webpack-simple ) and I can't seem to figure out how to get it to load my own external sass files.
I have it set up like this:
<style lang="sass" src="./sass/initial-variables"></style>
<style lang="sass" src="bulma"></style>
The tag pulling bulma in works just fine, but I get an error looking for my initial variables file:
ERROR in ./src/App.vue
Module not found: Error: Can't resolve './sass/initial-variables' in
'/Users/johnbriggs/Sites/mimismarket/src'
In my src folder, I have a sass directory with initial-variables.sass as a file.
What am I missing here?
It looks like you're missing the .sass. extension in your <style> tag. Webpack might take that relative import literally.
One thing I like to do to keep my single-file components clean is to have one <style> tag and then #import my SASS files:
<style lang="sass">
#import 'bulma'
#import './sass/initial-variables' // we don't need the extension here
</style>
Another thing to keep in mind is that you can import CSS/SASS files in your JavaScript, too. It's really handy for global stylesheets:
// main.js
import 'bootstrap/dist/css/bootstrap.min.css'
You can do the following in your webpack.config:
loader: 'vue-loader',
options: {
extractCSS: true,
loaders: {
sass: ExtractTextPlugin.extract({
use: 'css-loader!postcss-loader!sass-loader?indentedSyntax&data=#import "./sass/initial-variables.sass"',
fallback: 'vue-style-loader'
})
}
}
I am trying to load animate.css. This package is installed using the command npm install --save animate.css. Now, what is the best way to import it inside the project?
I have stumbled upon some solutions asking to copy the file inside the static folder and load it from there. But I would rather not to as we lose all the benefits of NPM if we move it from its package.
Assuming you want animate.css globally in your application
In your webpack
module: {
loaders: [
{ test: /\.css$/, loader: "css-loader" }
]
}
in yout main.js
import 'animate.css/animate.min.css'
What I did with similar scenario in my project is used src imports.
In your App.vue component add two style tags , one for global styles as App.vue is the entry point and other for scoped styles if you have any with the scoped attribute.
<style src="animate.css/animate.min.css">
/* global styles */
</style>
<style scoped>
/* local styles */
</style>