vue 使用scss

最新推荐文章于 2023-03-29 14:12:20 发布

chenxi004

最新推荐文章于 2023-03-29 14:12:20 发布

阅读量261

点赞数

分类专栏： vue 文章标签： vue scss webpack

本文链接：https://blog.csdn.net/chenxi004/article/details/102650418

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

1、安装全局 vue-cli

$ npm install --global vue-cli

2、初始化项目,创建一个基于 webpack 模板的新项目:

$ vue init webpack my-project

3、安装依赖

$ cd my-project
$ npm install

二、vue 配置 scss(局部)

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

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

2、找到/build/webpack.base.conf.js文件。如果需要在main.js中引入样式文件，不需要配置此文件。否则会编译报错

module: {
    rules: [{
        test: /\.(scss|css)?$/,
        loaders: ["style", "css", "sass"]
      },
    ]
}

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

<style lang="scss">
	$color:red !default; //声明默认变量 $color
	$color:purple; //根据需求覆盖默认变量
	.father01 {
   		color:$color;
	}
</style>

三、然后运行项目

npm run dev

四、补充：vue 配置 scss(全局引用)
1、安装sass的依赖包

npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install vue-style-loader --save-dev

2、安装sass-resources-loader

npm install sass-resources-loader --save-dev

3、修改build中的utils.js，或者在main.js中引入。

scss: generateLoaders('sass'),
 
//修改成:
 
scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/style/base.scss') //自定义文件名
    }
  }
)

4、在组件中的style标签添加lang=“scss”。

五、遇到的问题：
执行 npm run dev，项目报错：TypeError: this.getResolve is not a function

原因：npm install --save-dev sass-loader安装sass-loader时没有指定版本，默认安装了最新版本8.0.0，这是版本过高导致编译错误。

解决方法：
把项目package.json文件中sass-loader版本改为7.3.1。
再次执行npm install，重新安装项目依赖.
然后启动项目：npm run dev

引用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