vue-cli 如何使用scss

Posted 2023-05-01

参考技术A

一、创建一个基于 webpack 模板的新项目

1、全局安装 vue-cli

$ npm install --global vue-cli

2、创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

3、安装依赖

$ cd my-project
$ npm install

4、为了使用sass，我们需要安装sass的依赖包

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

5、修改style标签

打开src目录下的components目录中的Hello.vue文件。
然后修改 style标签如下

<style lang="sass">

6、然后运行项目

npm run dev

7、终端显示错误，如下：

ERROR  Failed to compile with 1 errors

error  in ./src/components/Hello.vue

Module build failed:
h1, h2
^
Invalid CSS after "h1, h2 ": expected "", was ""
in /Users/fangyongle/my-blogger/src/components/Hello.vue (line 36, column 9)

错误提示：无效的css。因为sass语法不使用大括号和分号。
如果你喜欢使用不带大括号的语法，只要去掉css代码的大括号和分号，即使用缩进语法。
如果你希望使用带大括号的语法，即SCSS
那么，你只要把lang="sass"改成lang="scss"就行了。

二、引用sass/scss 文件

举个例子 @import  "./common/scss/mixin";

千万别忘了分号，否则会报错类似的错误

Module build failed:
#app
^
Media query expression must begin with '('
in /Users/fangyongle/elema/src/App.vue (line 35, column 1)
@ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-0bf489db!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-248 13:3-17:5 14:22-256

好了，在vue项目中使用sass就这么简单

作者：no_shower
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

VUE-CLI3+PX2REM-LOADER+SCSS移动端自适应配置

参考技术A

移动端自适应需要做适配，本文介绍vue-cli3+px2rem-loader+scss的配置

注意 ：amfe-flexible是lib-flexible的优化，主要区别是amfe-flexible不会改变视口大小

安装amfe-flexible和px2rem-loader:

在入口文件main.js文件中引入amfe-flexible：

在index.html中修改meta：

在vue.config.js中配置：

然后重启脚手架

《vue移动端h5适配解决方案（rem or vw）》
《vue-cli3+lib-flexible+postcss-px2rem+less》