如何从vue-cli webpack-simple项目中提取css文件？

问题描述：

我还在学习Vue，所以我正在努力弄清楚如何将内联css转换为css文件。如何从vue-cli webpack-simple项目中提取css文件？

如果有人可以帮助我建立的CSS（SCSS）提取到一个css文件，我将不胜感激！

还是会打败vue的范围风格的目的？

这里是我的webpack.config代码：

var path = require('path') 
var webpack = require('webpack') 

module.exports = { 
    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: /\.(png|jpg|gif|svg)$/, 
     loader: 'file-loader', 
     options: { 
      name: '[name].[ext]?[hash]' 
     } 
     } 
    ] 
    }, 
    resolve: { 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js' 
    } 
    }, 
    devServer: { 
    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 
    }) 
    ]) 
}

您是否尝试过运行'NPM运行build'了吗？我有一个'vue-cli' Webpack项目，'npm run build'会自动将我的'.vue'文件中的CSS拖入一个单独的'.css'文件中。另外，通过“内联CSS”，您是否指的是'.vue'文件的'

我认为webpack-simple cli并没有内置的提取。它将css写入文件的头部，而不是inline ofc。 –

好的，那么看起来像一个快速的解决方案可能是创建一个'完整的'Webpack项目并将代码移入它。我发现Webpack配置和构建文件非常难以理解，并且可能需要很长时间才能找出如何手动设置以复制完整Webpack项目的行为。 –

答

所以，总结一下我们的看法：

答案这里是为他创造一个新的“全”的WebPack项目，并提出他的代码到它。

原因：

完整的WebPack项目从.vue文件翻出CSS自动到一个单一的CSS文件，这是他想要的东西。
“[t]他的webpack-simple cli没有内置[CSS]提取内容”。
的配置的WebPack和构建文件可以是很难理解，它可以带他很长一段时间来弄清楚如何手动设置东西复制一个完整的WebPack项目的行为。

嗨Nathan，我将vue-cli webpack启动并运行，并且我想出了如何更改我的文件，以便我可以在完整的webpack cli中运行它。欢呼所有的帮助人！有一个问题：是否有一种简单的方法来从子目录而不是根目录运行构建？ –

我不确定我了解你的问题。我在一个名为'client'的文件夹中有我的webpack项目。通常情况下，我打开一个终端，将'cd'放入'client'文件夹，然后在'client'内运行'npm run build'。但是，如果我将'cd'放入'client'的子目录，比如'client/config'，'npm run build'仍然可以工作。所以我可以“从子目录而不是[项目]的根目录运行构建”。但也许你的意思是不同的？ –

我的意思是，我想将构建上传到我的网络服务器上的子目录，而不是从根目录运行它。我已经上传到http://woolff.dk/frontio/，但是当我在浏览器中运行它时，窗口是空白的。 –

如何从vue-cli webpack-simple项目中提取css文件？

相关推荐