如何在 Vue 项目中使用 scss 文件和字体

Question

我用 vue-cli 创建了新项目，我想在我的项目中使用全局 scss 文件来应用全局样式。我也想使用字体系列而不在我想使用它的每个组件中导入 scss 文件

我找到了很多解决方案，但没有一个对我有帮助。我是 webpack 的新手，所以很难理解到底出了什么问题。 我安装了 loader npm install sass-loader node-sass --save-dev 并尝试用 webpack 做很多事情

webpack.config.js

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: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
          // other vue-loader options go here
        }
      },
      {
        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'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

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
    })
  ])
}

src/assets/scss/fonts.scss

@font-face {
  font-family: "SuisseIntl";
  src: url("../fonts/SuisseIntl.woff") format("woff");
}
@font-face {
  font-family: "SuisseIntl-Light";
  src: url("../fonts/SuisseIntl-Light.woff") format("woff");
}
@font-face {
  font-family: "SuisseIntl-SemiBold";
  src: url("../fonts/SuisseIntl-SemiBold.woff") format("woff");
}

$body-bg: red;

我希望能够在每个组件内的样式标记中使用字体系列，并且我希望能够将 scss 文件导入到组件中 this@import '../assets/scss/fonts'; ，但现在这会导致错误。 有人能帮助我吗？我应该怎么做才能让它发挥作用？

Answer 1

要在组件中使用 scss，请确保将 sass-loader 和 node-sass 作为开发依赖项安装。这将允许您在组件中使用 scss 样式：

<style lang="scss">
</style>

如果您想包含一些实际样式（例如在 css 中创建实际样式行的字体），请创建一个 scss 文件并将其包含在最顶层的 Vue 文件中（默认情况下类似于 App.vue）。

@import "./some/relative/path/to/your/scss/file.scss";

如果您想在每个组件中包含变量、函数或 mixin 而无需明确定义导入，请创建一个 scss 文件作为此类配置的入口点，例如/scss/config.scss。确保您不在此文件中输出任何 css 规则，因为这些 css 规则将针对每个组件重复多次。而是使用我之前提到的文件并将您的配置也导入其中。

然后，转到您的 vue.config.js 文件并将以下内容添加到对象中：

  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/config.scss";
        `
      }
    }
  }

这将自动加载配置文件。如果您仍在使用旧结构，则可以通过在自己的 sass-loader 中添加 data 选项来获得相同的行为：

  {
    test: /\.scss$/,
    use: [
      'vue-style-loader',
      'css-loader',
      {
        loader: 'sass-loader',
        options: {
          data: '@import "config";',
          includePaths: [
            path.join(__dirname, 'src/scss') // Or however else you get to your scss folder
          ]
        }
      }
    ],
  },