威斯尼斯人官网详解nuxt sass全局变量_vue.js_脚本之家

恩,经过朋友的支持消除的,因为 nuxt资料比超少的原因,很谢谢 “包子”的补助

自笔者直接上案例吧sass_jb51.rar

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

npm run generate//打包 //你打包好要放服务器上 不然 nuxt默认的那几个JS会报错 你就看不到效果了
li { background: nth } 

这里注意了 lang是 scss 不是sass

{ "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" } } 
@charset "utf-8"; li { span{color: nth} } 

@charset "utf-8"; //font body{ background: yellow; } $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ; 

其一是给你本地调试的 亲测 能够用 你会发觉 作者再度引用了 sass 那是因为
第二行 是官方网址给的, 笔者怕你更新退步了,所以令你在从天猫更新三回

别的,因为本身这几个案例 是 引入 scss 的写法 ,假使你是写在style的 要这么写

好 到此地没了,调节和测验是没难题了,假令你要打包成文件

  1232323231 你好是多少打算的    import '~/assets/a1.scss'; export default { name: 'date', data () { return { }//写死的数据 } }    

到此地就OK了,闲麻烦 你就径直从自家起来给的链接进去下下来demo
直接运营就好了。

 li { /*background: #fff;*/ background: nth }  

小心 本案例 只是把您通用 的 举个例子

第四 package.json (ps: package.json里面是小编前边的配置 直接复制过来的
,可是不为难,照着做)

$colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ; 
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//运行 

第二 新建 pages/index.vue

只存款和储蓄变量,别放公共的体制进去切记公共的体制
你能够参见笔者以前的博客这种写法

第三 nuxt.config.js

如上便是本文的全部内容,希望对我们的读书抱有助于,也可望我们多多照应脚本之家。

本身建议您要么跟我一步一步来走,相比较无法忘怀

如上这种通用的变量收取来,方便你在其余scss的体裁里面调用

const webpack = require; 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{ const sassResourcesLoader = { loader: 'sass-resources-loader', options: { resources: [ 'assets/cyc.scss' ] } } // 遍历nuxt定义的loader配置,向里面添加新的配置。 config.module.rules.forEach => { if  === '/\.vue$/') { rule.options.loaders.sass.push rule.options.loaders.scss.push } if (['/\.sass$/', '/\.scss$/'].indexOf !== -1) { rule.use.push } }) }, } } 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章