Is there an option in Vue CLI (like in Angular CLI) to set the default language used in component styles to "scss"?
Must I set lang="scss" in all my style markups by myself?
You can try to setup your loaders in webpack config in a correct order.
And in there isn't a specific item called scss it is sass here which will handle .scss
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}, {
test: /\.vue$/,
loader: 'vue'
}, {
test: /\.s[a|c]ss$/,
loader: 'style!css!sass'
}]
},
vue: {
loaders: {
scss: 'style!css!sass'
}
}
Related
I am attempting to use #fullcalendar/vue3 along with webpack to bundle an example calendar -- but my webpack bundler is failing when it comes across the css file, saying unexpected token. I assume i would need a proper loader for the css, but I am not sure how it should be.
App.vue component
<template>
<div>
<FullCalendar/>
</div>
</template>
<script>
import FullCalendar from '#fullcalendar/vue3';
export default {
components: {
FullCalendar
}
}
</script>
webpack.config.js rules section
rules: [
{
test : /\.vue$/,
exclude: /node_modules/,
use : 'vue-loader'
},
{
test: /\.scss$/,
use : [
MiniCssExtractPlugin.loader,
{loader: 'css-loader', options: {url: false, sourceMap: argv.mode === 'development'}},
{loader: 'postcss-loader', options: {sourceMap: argv.mode === 'development'}},
{loader: 'sass-loader', options: {sourceMap: argv.mode === 'development'}}
]
},
{
test : /\.js$/,
exclude: /node_modules/,
use : {
loader: 'babel-loader'
}
}
]
I finally figured it out shortly after asking this question. The solution was to add a rule specific to .css files, which I just did the following:
{
test: /\.css$/,
use : [
{loader: MiniCssExtractPlugin.loader},
{loader: 'css-loader', options: {importLoaders: 1}}
]
}
I'm creating a project in Rails with vue, for this I'm working with webpack, what happens and my text editor, atom IDE, does not process the .vue files, I've tried the steps that the documentation recommends, but I do not know what I'm doing wrong
I provided loading the vue-loader by npm, but I still can not see the .vue files in my project, then I did it by configuring in the webpack.config.js file, and nothing. Then I leave the links of the things I did that did not work.
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import OptimizeCssAssetsPlugin from '../../../src/';
module.exports = {
entry: './index',
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: { loader: 'style-loader' },
use: {
loader: 'css-loader',
options: { minimize: true }
}
},
vue: {
loaders: {
sass: 'style!css!sass?indentedSyntax',
scss: 'style!css!sass'
}
},
plugins: [
new ExtractTextPlugin('file.css'),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /optimize-me\.css/g
})
};
I hope to be able to work the .vue files
I am trying to use the following code in my vue.config.js file, but it is giving me errors that module is not allowed. I am aware that there are configureWebpack and chainWebpack options, but I have no idea how to convert the following to use them. Any help would be appreciated
var path = require('path');
module.exports = {
foo:{},
bar{},
// Putting module in here does not work
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
{
loader: "sass-loader",
options: {
includePaths: [
path.resolve(__dirname, "./node_modules/#syncfusion")
]
}
}
]
}
}
}
]
}
}
and in my vue file
<style lang="scss">
#import 'subfolder-inside-syncfusion/some-file.scss';
</style>
Link to code I found:
https://www.syncfusion.com/forums/139116/scss-files-when-included-in-my-file-doesnt-work-as-expected
You dont have to tap into the webpack config, if all you need is to include a global SCSS file. To import #syncfusion from node_modules, you can setup your vue.config.js like so:
css: {
loaderOptions: {
sass: {
data: `#import "~#syncfusion";`
}
}
}
For more info, see the Vue docs "Working with CSS".
I use MiniCssExtractPlugin in a project which has some problem when I import css file inside node modules in a vue file. Import statement:
import '../../../node_modules/video.js/dist/video-js.css
Webpack config:
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: { url: false }
}
]
}
No style has been applied using the above setting. I tried to create a test.css file and put around in different folder. All directory will work except inside node_modules folder. Please help.
Extra info:
If I replace MiniCssExtractPlugin with style-loader, everything will be ok.
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: { url: false }
}
]
}
Does anyone know how to do this? Riot scoped css would be awesome if only I could use SASS. I checked the docs but couldn't understand what's required.
I would like to be able to:
<style scoped>
#extend %my-sass-extension;
h1 {
color: $my-color;
}
</style
You can import scss in script tagļ¼ if you use webpack, like this:
<script>
import './page-head.scss'
</script>
And my webpack config:
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}]
}
};