Well, it was done with the help of a friend. Because of the lack of nuxt information, I am very grateful for the help of "Bunzi"
Note: This case is just a common example
$colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ;
The above general variables are extracted to facilitate your call in other scss styles.
for example
li {
background: nth($colour,6)
}
Only store variables, don’t put public styles in and remember public styles. You can refer to the writing style of my previous blog.
I'll just take the casesass_jb51.rar
There are operation instructions in the case
I suggest you follow me step by step, which is more unforgettable
The first step is to create a new folder, assets and then create two new scss files
@charset "utf-8";
li {
span{color: nth($colour,6)}
}
@charset "utf-8";
//font
body{
background: yellow;
}
$colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ;
Second, new pages/
<template>
<ul>
<li><span>1232323231</span></li>
<li><span>Hello, what are your plans</span></li>
</ul>
</template>
<script>
import '~/assets/';
export default {
name: 'date',
data () {
return { }//Write dead data }
}
</script>
<style>
</style>
third
const webpack = require('webpack');
= {
head: {
title: 'project',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: ' project' }
]
},
build: {
extend(config,ctx){
const sassResourcesLoader = {
loader: 'sass-resources-loader',
options: {
resources: [
'assets/'
]
}
}
// traverse the loader configuration defined by nuxt and add new configuration to it. ((rule) => {
if (() === '/\\.vue$/') {
(sassResourcesLoader)
(sassResourcesLoader)
}
if (['/\\.sass$/', '/\\.scss$/'].indexOf(()) !== -1) {
(sassResourcesLoader)
}
})
},
}
}
Fourth (ps: It is copied directly from my previous configuration, but it doesn’t matter, just do as it goes)
{
"name": "test",
"dependencies": {
"axios": "^0.17.0",
"css-loader": "^0.28.7",
"jquery": "^3.2.1",
"mini-toastr": "^0.6.6",
"node-sass": "^4.5.3",
"nuxt": "^1.0.0-rc11",
"postcss-loader": "^2.0.8",
"sass-loader": "^6.0.6",
"sass-resources-loader": "^1.3.1",
"scss": "^0.2.4",
"style-loader": "^0.19.0",
"vue-notifications": "^0.9.0",
"vuex": "^3.0.1"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"devDependencies": {
"coffee-loader": "^0.9.0",
"coffee-script": "^1.12.7",
"node-sass": "^4.5.3",
"pug": "^2.0.0-beta6",
"pug-loader": "^2.3.0",
"sass-loader": "^6.0.6"
}
}
Run the code
This is for you to debug locally. It can be used with your test. You will find that I have repeatedly quoted sass. This is because the second line is given by the official website. I am afraid that your update will fail, so I asked you to update it from Taobao.
npm install --save nuxt axios vuex npm install --save-dev [email protected] pug-loader coffee-script coffee-loader node-sass sass-loader npm install cnpm cnpm install --save node-sass sass-loader postcss-loader sass-resources-loader style-loader css-loader npm run dev//run
OK. It's gone here, debugging is fine. If you want to package it into a file
npm run generate//Pack//You pack it and put it on the server otherwise nuxtThe default onesJSWill report an error You won't see the effect
Or you have the entry file configured
It's OK to get here. Please go straight from the link I gave at the beginning and go down the demo and run it directly.
In addition, because my case is introduced to the writing method of scss, if you write it in style, you should write it like this
<style lang="scss">
li {
/*background: #fff;*/
background: nth($colour,6)
}
</style>
Pay attention here lang is scss not sass
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.