Maison  >  Questions et réponses  >  le corps du texte

javascript - Comment extraire des styles dans un fichier séparé dans une application Vue monopage?

Le problème est que je crée actuellement une application SAP et que Webpack est configuré pour extraire des fichiers. Le style n'est ni extrait dans un fichier ni empaqueté dans js par webpack. Au lieu de cela, la balise de style est générée sur la page. Demandez à Dieu de vous guider.
Utilisation de vue2, webpack2
configuration du webpack :

var path = require('path')
var vuxLoader = require("vux-loader");
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");



const webpackConfig = {

  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            loaders: {
              'scss': 'vue-style-loader!css-loader!sass-loader',
              'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
            }
          }
      },
      {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
      },
      {   test: /iview.src.*?js$/, loader: 'babel' },
      {
          test: /\.css$/,
          use:new ExtractTextPlugin({
              filename:'build.css',
              ignoreOrder:true
          }).extract({
            use:{
              loader:'css-loader',
              options:{
                modules:true
              }
            },
            fallback:'style-loader'
          })
      },
      {
          test: /\.less$/,
          loader:'style-loader!css-loader!less-loader'
      },
      {
          test: /\.(eot|woff|woff2|ttf)$/,
          loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
      },
      {
          test: /\.(png|jpg|gif|svg)$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]?[hash]'
          }
      }
    ]
  },
  vue:{
    loaders :{
      css: ExtractTextPlugin.extract({fallback:'style-loader', use:'css-loader'})
    }
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
};

module.exports = vuxLoader.merge(webpackConfig, {plugins:['vux-ui']});

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

package.json :

{
  "name": "blog",
  "description": "leung blog mobile",
  "version": "1.0.0",
  "author": "leung",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8082",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.2.1"
  },
  "devDependencies": {
    "axios": "^0.16.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-latest": "^6.0.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.9.0",
    "less-loader": "^4.0.3",
    "node-sass": "^4.5.0",
    "sass-loader": "^5.0.1",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^11.1.4",
    "vue-router": "^2.3.1",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.2.1",
    "vuex": "^2.2.1",
    "vux": "^2.2.1-rc.5",
    "vux-loader": "^1.0.57",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

Si je commente ce code, aucune erreur ne sera signalée T_T

vue:{
    loaders :{
      css: ExtractTextPlugin.extract({fallback:'style-loader', use:'css-loader'})
    }
  },

Je ne comprends pas, éclairez-moi s'il vous plaît

伊谢尔伦伊谢尔伦2685 Il y a quelques jours903

répondre à tous(1)je répondrai

  • 三叔

    三叔2017-07-05 10:51:17

    L'exemple suivant est pour votre référence, j'espère qu'il vous sera utile

    const path = require('path');
    const webpack = require('webpack');
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: {
        main: './src/index.js',
        vendor: ['vue', 'vue-router','vuex']
      },
      output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '',
        filename: 'js/build.js'
      },
      module: {
        rules: [{
            test: /\.vue$/,
            use: [{
              loader: 'vue-loader',
              options: {
                loaders: {
                  css: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'vue-style-loader'
                  })
                },
              }
            }]
          },
          {
            test: /\.(js|jsx)$/,
            use: [{
              loader: 'babel-loader',
            }],
            exclude: /node_modules/
          },
          {
            test: /\.(png|jpg|gif|svg)$/,
            use: [{
              loader: 'file-loader',
              options: {
                name: 'images/[name].[ext]'
              }
            }]
          }
        ]
      },
      plugins: [
        new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
          filename: 'js/vendor.min.js',
        }),
        new ExtractTextPlugin("css/style.css"),
        new HtmlWebpackPlugin({
          template: 'public/index.html'
        })
      ],
      resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js'
        }
      },
      devServer: {
        contentBase: path.join(__dirname, "dist"),
        stats: "errors-only",
        port: 9000,
        historyApiFallback: true,
        noInfo: true
      },
      performance: {
        hints: false
      },
      devtool: '#eval-source-map'
    }
    
    if (process.env.NODE_ENV === 'production') {
      module.exports.devtool = '#source-map'
      module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
          'process.env': {
            NODE_ENV: '"production"'
          }
        }),
        new webpack.optimize.UglifyJsPlugin({
          sourceMap: true,
          compress: {
            warnings: false
          }
        }),
        new webpack.LoaderOptionsPlugin({
          minimize: true
        })
      ])
    }
    

    répondre
    0
  • Annulerrépondre