基於vue中css預載使用sass的設定方式詳解

下面我就為大家分享一篇基於vue中css預載使用sass的設定方式詳解，具有很好的參考價值，希望對大家有幫助。

1.安裝sass的依賴套件

#

npm install --save-dev sass-loader

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

2.在build資料夾下的webpack.base.conf.js的rules裡面加入配置，如下紅色部分

{ 
 test: /\.sass$/, 
 loaders: ['style', 'css', 'sass'] 
}

// module用来解析不同的模块
 module: {
  rules: [
   ...(config.dev.useEslint ? [createLintingRule()] : []),
   {
    test: /\.vue$/,
    // 也就是说，对.js和.vue文件在编译之前进行检测，检查有没有语法错误'eslint-loader'
    // enforce: 'pre'选项可以确保，eslint插件能够在编译之前检测，如果不添加此项，就要把这个配置项放到末尾，确保第一个执行
    // 对vue文件使用vue-loader，该loader是vue单文件组件的实现核心，专门用来解析.vue文件的
    loader: 'vue-loader',
    // 将vueLoaderConfig当做参数传递给vue-loader,就可以解析文件中的css相关文件
    options: vueLoaderConfig
   },
   {
    test: /\.js$/,
    // 对js文件使用babel-loader转码,该插件是用来解析es6等代码
    loader: 'babel-loader',
    // 指明src和test目录下的js文件要使用该loader
    include: [resolve('src'), resolve('test')]
   },
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    // 对图片相关的文件使用 url-loader 插件，这个插件的作用是将一个足够小的文件生成一个64位的DataURL
    // 可能有些老铁还不知道 DataURL 是啥，当一个图片足够小，为了避免单独请求可以把图片的二进制代码变成64位的
    // DataURL，使用src加载，也就是把图片当成一串代码，避免请求，神不神奇？？
    loader: 'url-loader',
    options: {
     // 限制 10000 个字节一下的图片才使用DataURL
     limit: 10000,
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   {
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    // 字体文件处理，和上面一样
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('media/[name].[hash:7].[ext]')
    }
   },
   {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
   },
    {
      test: /\.sass$/,
      loaders: ['style', 'css', 'sass']
    }
  ]
 },

#3.修改模板裡面的style lang="scss";例如模板紅色標記

##4.npm run dev

5.效果

#上面是我整理給大家的，希望未來會對大家有幫助。

相關文章：

js中el表達式的使用與非空判斷方法

##JS實作左邊列表移到右邊列表功能

JS中用EL表達式取得上下文參數值的方法

#

以上是基於vue中css預載使用sass的設定方式詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！