第一步： 首先你要有對應(yīng)的樣式環(huán)境

首先需要安裝

npm install stylus-loader css-loader style-loader --save-dev

接下來
（1）使用less

npm install less less-loader --save-dev

（2）使用scss

npm install sass sass-loader --save-dev

（3)安裝ExtraTextPlugin

npm install extract-text-webpack-plugin --save-dev

---

第二步： 配置webpack

在 build–webpack.base.conf.js 文件中配置

這里我使用的是less，配置如下：

const ExtractTextPlugin = require('extract-text-webpack-plugin');module: {rules: [...(config.dev.useEslint ? [createLintingRule()] : []),{test: /\.vue$/,loader: 'vue-loader',options: vueLoaderConfig},{test: /\.js$/,loader: 'babel-loader',include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {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: /\.less$/,exclude: "/node_modules/",use: ExtractTextPlugin.extract({fallback: "style-loader",use: [{loader: "css-loader",options: {minimize: true}},{loader: "postcss-loader"},{loader: "less-loader"}]})},]},plugins: [new ExtractTextPlugin("styles.css")],

---

第三步：在頁面中使用樣式

<style lang="less" scoped> .title {color: red; }

總結(jié)

以上是生活随笔為你收集整理的使用ExtractTextPlugin将css和js分开打包的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。