-
Notifications
You must be signed in to change notification settings - Fork 915
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to use "scss" in *.vue? #363
Comments
Hi @geekingin thanks for filing this issue.
|
@LinusBorg Sorry for the broken format. I'm not sure, here is my loaders in webpack config. module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}, {
test: /\.vue$/,
loader: 'vue'
}, {
test: /\.s[a|c]ss$/,
loader: 'style!css!sass'
}]
} Is it right? |
vue-loader infers the loader to use from the So you have to tell vue-loader to use sass-loader for 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'
}
} |
That's exactly what i'm looking for, thanks a lot! |
great resolution!!! thanks! |
trying this .. I get
any ideas ? |
You are using webpack 2, which changed how to pass config to loaders: https://vue-loader.vuejs.org/en/configurations/advanced.html |
More to the point for my fellow googler's looking for scss and Vue 2 config: The vue config in webpack-simple works for |
The newest Vue-Cli with webpack is missing the sass-loader in order for this to work.
|
We never included any of the preprocessor loaders - neither sass-loader, not less-loader or any other - because people probably only need one of those, so why install all of them? This is is also not a secret, it's right in the template's documentation: https://vuejs-templates.github.io/webpack/pre-processors.html |
It is missing, though. In order for this to work, it needs to be included manually. |
u can see this : https://github.com/keydone/newBlog/blob/develop/build/webpack.base.conf.js |
After... npm install sass-loader node-sass webpack --save-dev I found <style land="scss"> to work just fine. |
i also have this probrem,and i can't resolve it |
i have installed node-sass and sass-loader. my webpack config : { |
I had a similar runaround, seems to work in webpack 2.5.1, vue-loader 7.3.0 with:
config uses:
|
In my case, it still occurs when i use style-loader in vue-loader options, like this { Then i resolve this problem by replacing style-loader with vue-style-loader! { Hope this helps! |
Shouldn't the |
@parzh You are right. However, |
{
{
test: /\.s(a|c)ss$/,
// test: /\.sass$/,
loaders: ['style', 'css', 'sass']
},
} |
Got it working only by above solution, with only one change - appending
I'm using Vue 2, Webpack 4, Typescript, and all other packages updated to latest version |
Where do you place that? webpack.config is not accesible now, only vue.config.js! |
@dsldiesel sorry never mind what i posted before, i had to different configs |
I still got the same problem when I use lang="scss" in the style-tag. Can someone help me? I'm using @vue/cli 4.5.4... It says: and this is my webpack.config.js File: var path = require('path') module.exports = { if (process.env.NODE_ENV === 'production') { I've already installed this $ npm install sass-loader node-sass webpack --save-dev as well Thank you in advance for your help. P.S.: I wanted to implement this: https://codesandbox.io/s/basetimer-no-parent-control-forked-y08vs?file=/src/components/BaseTimer.vue |
is there a solution for this problem? i also have the same problem. |
I'm using vue2.0 rc.7 and vue-loader 9.5.
I cannot figure out how to use scss in vue file.
If i write like this
<style lang="scss">
, there will be an error saying Cannot resolve module 'scss' in xxxxx.I can only use scss with
<style lang="sass">
However, webstorm's inspection will not accept it.
So, how can i use scss syntax directly in *.vue
The text was updated successfully, but these errors were encountered: