Vue-loader: 单独的scss文件，没有autoprefixer loader

[luxueyan]

在main.js 文件中import进来了的样式文件，没有自动执行autoprefixer loader

import './assets/scss/animation.scss'
import './assets/scss/transition.scss'
import './assets/fonts/style.css'

[egoist]

... vue-loader 只管 .vue 文件里的样式

[luxueyan]

@egoist 如果想自己配置 ，求问怎么配置呢

[egoist]

给你的 .scss 文件加一个 loader

[luxueyan]

我把脚手架生成的util里面的styleLoaders 改了，插入了一个autoprefix

[JounQin]

…… vue-loader 是处理 .vue 文件的，在 js 中直接 import .scss 文件应该在 webpack 配置中自己新增一个 sass-loader，改 vue-loader 的配置是没用的。

例如：

{
  loaders:{
      test: /\.scss$/,
      loader: 'style!css!postcss!sass',
      exclude: /node_modules/
  },
  postcss: [
    autoprefixer({
      browsers: 'last 2 version'
    })
  ]
}

[luxueyan]

@JounQin 恩！ 谢谢。 postcss 这个有autoprefix的功能

[luchanan]

@JounQin 发现加上你上面的语句，就会下面的错

Invalid CSS after "...load the styles": expected 1 selector or at-rule, wa
s "var content = requi"

但是呢，如果不使用你上面的话

{
                test: /\.(css|scss)$/,
                loader: "style!css!postcss!sass",
                exclude: /node_modules/
 }

而在index.js使用require css(如下)可以编译scss文件，但是编译后的文件没加上autoprefixer

require('./scss/home.scss')

贴一下webpack.base.conf.js

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var glob = require('glob')
var autoprefixer = require('autoprefixer')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd

var projectRoot = path.resolve(__dirname, '../')
var srcDir = path.resolve(__dirname, '../src')
var entries = utils.getEntries(srcDir + '/views/**/*.js')

var autoprefixerConf = autoprefixer({ browsers: ['last 2 versions','Android >= 4.0','iOS >= 6'] });

module.exports = {
    entry: entries,

    output: {
        path: config.build.assetsRoot,
        publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
        filename: '[name].js'
    },

    resolve: {
        extensions: ['', '.js', '.vue'],
        fallback: [path.join(__dirname, '../node_modules')],
        alias: {
            'vue$': 'vue/dist/vue',
            'jquery$': 'jquery/dist/jquery',
            'src': path.resolve(__dirname, '../src'),
            'assets': path.resolve(__dirname, '../src/assets'),
            'images': path.resolve(__dirname, '../src/assets/images'),
            'js': path.resolve(__dirname, '../src/assets/js'),
            'components': path.resolve(__dirname, '../src/components'),
            'scss': path.resolve(__dirname, '../src/assets/scss')
        }
    },

    resolveLoader: {
        fallback: [path.join(__dirname, '../node_modules')]
    },

    module: {
        preLoaders: [
            {
                test: /\.vue$/,
                loader: 'eslint',
                include: projectRoot,
                exclude: /node_modules/
            },
            {
                test: /\.js$/,
                loader: 'eslint',
                include: projectRoot,
                exclude: /node_modules/
            }
        ],

        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                loader: 'babel',
                include: projectRoot,
                exclude: /node_modules/
            },
            {
                test: /\.html$/,
                loader: 'html'
            },
            {
                test: /\.json$/,
                loader: 'json'
            },
            /*{
                test: /\.(css|scss)$/,
                loader: "style!css!postcss!sass"
            },*/
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url',
                query: {
                    limit: 10000,
                    name: utils.assetsPath('images/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url',
                query: {
                    limit: 10000,
                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                }
            }
        ]
    },
    // js 中引入的样式处理
    postcss: [autoprefixerConf],
    eslint: {
        formatter: require('eslint-friendly-formatter')
    },
    vue: {
        // .vue 中的样式处理
        loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
        postcss: [autoprefixerConf]
    },
    plugins:[]
}
var pages = utils.getEntries('./src/views/**/*.html',1);

for (var pathname in pages) {
  var conf = {
    filename: pathname + '.html', // html文件输出路径
    template: pages[pathname],   // 模板路径
    inject: true,                // js插入位置
  };
  pathname=pathname.split("/")[1];//去掉views
  if (pathname in module.exports.entry) {
    conf.inject = 'body';
    conf.chunks = [pathname, 'vendor', 'manifest'],
    conf.hash = true;
  }
  module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

也试了一下@luxueyan 的方法也是没有效果，不知道是不是版本的问题

{
  "devDependencies": {
    "autoprefixer": "^6.5.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "node-sass": "^3.11.1",,
    "postcss-loader": "^1.1.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "css-loader": "^0.25.0",
    "vue-loader": "^9.7.0",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.3",
  },
  "dependencies": {
    "vue": "^2.0.1",
  }
}

[luxueyan]

@luchanan 我是这么处理的， utils.js 文件 加上这个

webpack.base.conf.js 加上这个

如果考虑到uglifyjs的bug导致css-loader又执行了一遍autoprefix导致build后不符合逾期，在utils.js中 加这个

[luchanan]

@luxueyan 厉害哇我的哥，答案非常有用，解决了困扰了几天的两个问题
1、.js引入.scss没加浏览器前缀的问题
2、npm run dev和npm run build 前缀效果不一样的问题
非常感谢

[RunningV]

上面的方法貌似是[email protected]的配置，我用的webpack2改了半天没成功，求大神help

[guanweiwang]

我也不行

[luchanan]

@RunningV @Gavan1993 如果是基于vue-cli webpack2我是这样解决的，build/utils.js修改如下

exports.cssLoaders = function (options) {
  ***
  var cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  },
  postcssLoader = {
    loader: 'postcss-loader' //解决.js文件require/import autoprefixer问题
  }
  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader, postcssLoader] //解决.js文件require/import autoprefixer问题
    ***
}

或者可以在这里看更加详细的：https://github.com/luchanan/vue2.0-multi-page
这个地址的vue2.3-multiple-page分支

[caizhisheng]

@luchanan 按照你的方法，报了一个警告

(Emitted value instead of an instance of Error)

⚠️ PostCSS Loader

Previous source map found, but options.sourceMap isn't set.
In this case the loader will discard the source map entirely for performance reasons.
See https://github.com/postcss/postcss-loader#sourcemap for more information.

为啥？ 我是基于vue-cli webpack2

[Moerj]

@caizhisheng

var postcssLoader = {
    loader: 'postcss-loader',
    options:{
      sourceMap: true //消除警告
    }
  }

[taoliujun]

这篇博文的解决思路值得参考：https://taoliujun.github.io/2017/postcss-support-vue-and-less-sass-css/

This blog post is worth considering the solution:
https://taoliujun.github.io/2017/postcss-support-vue-and-less-sass-css/

[transtone]

https://github.com/vuejs/vue-loader/issues/1090