vue项目使用sass

该文章由 leevare 发布于 ,归类于 Javascript

首先安装必要的模块

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

使用--save会将其自动添加到package.json文件中

然后配置webpack.base.config.js文件,在loaders里面加上module --rules

rules: [
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.scss/,
    loaders: ["style", "css", "sass"]
  }
]

最后,在style标签中使用scss时,声明一下

<style lang="scss" scoped="" type="text/css"></style>

对比上述配置,其余的模块配置与此类似。

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒