vue.js - webpack 提取vue组件里的.scss文件，没有生成style.css？

问题描述

问 题

1. 项目里引入了bootstrap.css文件，可以将其分离提取出来，但是vue组件里的model.scss能编译成功，却无法提取出来，不知道是哪里出问题了。

2. 这是config.js的配置文件

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项
  entry:  path.resolve(__dirname, 'src/index.js'),//已多次提及的唯一入口文件
  output: {
    path: path.resolve(__dirname, 'dist'),//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@':  path.resolve(__dirname, 'src')
      }
  },
  module: {
      loaders: [
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          },
          {
              test: /\.css$/,
              use: ExtractTextPlugin.extract({
                  fallback:"style-loader",
                  use:"css-loader"
              })
          },
          {
              test: /\.less$/,
              use: ExtractTextPlugin.extract({
                  fallback:"style-loader",
                  use:["sass-loader","css-loader"]
                 
              })
          },
          {
              test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg)$/,
              loader: 'url-loader?limite=8192'   // limit 是转换base64的文件大小的阀值8兆
          },
          {
              test: /\.html$/,
              loader: 'html-loader'    // 可以用来加载模板
          }
      ],
     
  },
  plugins: [
      
      new ExtractTextPlugin("styles.css"),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      })
  ],
  devServer: {
    contentBase: path.resolve(__dirname,"dist"),//本地服务器所加载的页面所在的目录
    port:8050,
    open:true,
    publicPath:"/",
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } 
}

编译完之后只在这里生成了，却没有生成单独的文件。

恳请大神帮忙看看，谢谢！！！！

解决方案

还需要配置一下，搞了几天总算可以了

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      extractCSS: true
    }
},

这篇关于vue.js - webpack 提取vue组件里的.scss文件，没有生成style.css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！