Question

我的scss文件没有编译。它不明白我对我的代码做了什么。我希望能够使用Sass而不是CSS，但我找不到编译Sass的正确方法。

我正在使用带有Vue.js的webpack模板

我的webpack配置文件如下所示：

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
return path.join(__dirname, '..', dir)
}

module.exports = {
entry: {
app: './src/main.js',
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath
  : config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
}
},
module: {
rules: [
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
  },
  {
    test: /\.scss$/,
    use: [ 'style-loader','css-loader','sass-loader' ],
    loaders: ['style', 'css', 'sass']
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    query: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    query: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  }
]
}
}

Answer 1

这样做的一种方法是将一个scss文件作为条目。这是导入所有不同scss文件的地方。像this这样的东西。然后在js条目文件的源代码中导入scss文件（在本例中为./src/main.js）。所以当webpack读取你的main.js时，它会看到import './myscssfile.scss'并查找加载器（或者我认为它是这样）。以下是我在webpack2中执行scss模块的方法：

module: {
 rules: [
  // my js stuff
  { test: /\.js$/, enforce: 'pre', loader: 'eslint-loader', exclude: /node_modules/ },

  // my scss stuff
  {
    test: /\.scss$/,
    use: [
      {
        loader: 'style-loader'
      },
      {
        loader: 'css-loader',
        options: {
          modules: true,
          importLoaders: 2,
          sourceMap: true,
          localIdentName: '[local]___[hash:base64:5]'
        }
      },
      {
        loader: 'autoprefixer-loader',
        options: {
          browsers: 'last 2 version'
        }
      },
      {
        loader: 'sass-loader',
        options: {
          outputStyle: 'expanded',
          sourceMap: true
        }
      }
    ]
  }
 ]
}

我希望它有效。

Answer 2

只需在组件中使用<style lang="sass"></style即可。如果有帮助，请告诉我。

Sass没有编译

2 个答案: