详解nuxt sass全局变量(公共scss解决方案)

恩,经过朋友的帮助搞定的,因为 nuxt资料比较少的原因,很感谢  “包子”的帮助

注意  本案例  只是把你通用 的 比如 

$colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ;

以上这种通用的变量抽出来,方便你在其他scss的样式里面调用

比如

li {

background: nth($colour,6)

}

只存储变量,别放公共的样式进去切记公共的样式 你可以参考我之前的博客那种写法 

我直接上案例吧sass_jb51.rar

案例里面有运行说明

我建议你还是跟我一步一步来走,比较刻骨铭心

第一步新建文件夹 assets然后新建两个scss文件 a1.scss cyc.scss

a1.scss

@charset "utf-8";

li {

span{color: nth($colour,6)}

}

cyc.scss

@charset "utf-8";

//font

body{

background: yellow;

}

$colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ;

第二 新建       pages/index.vue

<template>

<ul>

<li><span>1232323231</span></li>

<li><span>你好是多少打算的</span></li>

</ul>

</template>

<script>

import '~/assets/a1.scss';

export default {

name: 'date',

data () {

return { }//写死的数据

}

}

</script>

<style>

</style>

第三 nuxt.config.js

const webpack = require('webpack');

module.exports = {

head: {

title: 'project',

meta: [

{ charset: 'utf-8' },

{ name: 'viewport', content: 'width=device-width, initial-scale=1' },

{ hid: 'description', name: 'description', content: 'Nuxt.js project' }

]

},

build: {

extend(config,ctx){

const sassResourcesLoader = {

loader: 'sass-resources-loader',

options: {

resources: [

'assets/cyc.scss'

]

}

}

// 遍历nuxt定义的loader配置,向里面添加新的配置。

config.module.rules.forEach((rule) => {

if (rule.test.toString() === '/\\.vue$/') {

rule.options.loaders.sass.push(sassResourcesLoader)

rule.options.loaders.scss.push(sassResourcesLoader)

}

if (['/\\.sass$/', '/\\.scss$/'].indexOf(rule.test.toString()) !== -1) {

rule.use.push(sassResourcesLoader)

}

})

},

}

}

第四  package.json  (ps:   package.json里面是我之前的配置 直接复制过来的 ,但是不碍事,照着做)

{

"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"

}

}

运行代码

这个是给你本地调试的  亲测 可以用  你会发现 我重复引用了  sass  这是因为 第二行  是官网给的, 我怕你更新失败了,所以让你在从淘宝更新一遍

npm install --save nuxt axios vuex

npm install --save-dev pug@2.0.0-beta6 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//运行

好  到这里没了,调试是没问题了,如果你要打包成文件

npm run generate//打包

//你打包好要放服务器上 不然 nuxt默认的那几个JS会报错 你就看不到效果了

要么你入口文件配置好

到这里就OK了,闲麻烦 你就直接从我开头给的链接进去下下来demo  直接运行就好了。

另外,因为我这个案例 是   引入 scss 的写法 ,如果你是写在style的  要这么写

<style lang="scss">

li {

/*background: #fff;*/

background: nth($colour,6)

}

</style>

这里注意了  lang是   scss 不是sass

以上是 详解nuxt sass全局变量(公共scss解决方案) 的全部内容, 来源链接: utcz.com/z/336674.html

回到顶部