2022.01.14更新
npm install 时的问题
推荐使用 npm install sass sass-loader 安装
"sass": "1.26.8",
"sass-loader": "8.0.2",
1.首先可以采取下面（2019.07.1更新）提到的淘宝镜像，用cnpm安装
2.仍然报错的话，可能是node-sass和sass-loader版本不匹配，或者nodejs版本过高造成的
//package.json
"node-sass": "^6.0.1",
"sass-loader": "^10.2.0",
全局配置
全局引入只需要在main.js内引入一个index.scss文件，其余引用样式可以在index.scss引入
// index.scss
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-variables.scss';
@import './element-ui.scss';
@import './sidebar.scss';
body {
height: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
2019.07.1更新
.scss和.css相比较有很大的优势，其中一个就是可以通过$定制全局的样式，函数等。
具体请参考sass官网 https://www.sass.hk/
首先你需要 npm install --s node-sass sass-loader
🎐🎐--------------------🎐🎐--------------------🎐🎐--------------------🎐
注意：若无法正常安装 node-sass 请尝试使用淘宝镜像下载
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
点击此处可查看详情说明
🎐🎐--------------------🎐🎐--------------------🎐🎐--------------------🎐
1.设置一个控制全局的.scss文件
image.png
2.在你需要用到的页面引入
image.png
需要注意的是，这种写法需要你在每个用到的页面都必须这样引入（直接在main.js引入 theme.scss是没有用的），所以教给大家一个配置全局scss的一个方法。
1.首先你需要 npm install --s sass-resources-loader
2.在build目录下找到utils.js文件
image.png
具体放置位置如图：
image.png
具体代码如下：
function generateSassResourceLoader() {
let loaders = [
cssLoader,
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
// 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, '../static/style/common.scss'
resources: path.resolve(__dirname, '../src/assets/css/theme.scss')
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
// sass: generateLoaders('sass', { indentedSyntax: true }),
// scss: generateLoaders('sass'),
sass:generateSassResourceLoader(),
scss:generateSassResourceLoader(),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
重新 npm run dev 一下，然后就可以了。就不需要再在每个页面引入那个theme.scss文件了
